使用jquery添加div链接 [英] adding div around link using jquery

问题描述

我点击一个按钮，在链接上添加一个div。但是当我多次单击按钮时，它会添加多个div。

 < li> 
< label> < /标签> 
< div class =deletebutton> 
< label> < /标签> 
< div class =deletebutton> 
< label> < /标签> 
< div class =deletebutton> 
< input type =buttonid =ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1value =Removeclass =ruButton ruRemovename =RemoveRow> 
< / div> 
< / div> 
< / li> 
  

如何确保它首先检查链接是否有div，然后添加。

我使用以下代码：

  var parentTag = $（ .ruRemove）父（）得到（0）.tagName。; 
 
 if（parentTag =='LI'）{
 $（。ruRemove）。wrap（< div class ='data deletebutton'>< / div> ）; $（。deletebutton）。before（< label>< / label>）; 
} else {
 
 var par = $（'。deletebutton'）。parent（）; 
 if（par.is（'div'））par.remove（）; 
 $（。ruRemove）。wrap（< div class ='data deletebutton'>< / div>）; 
 
 var prev = $（'。deletebutton'）。prev（）; 
 if（prev.is（'label'））prev.remove（）; （< label>< / label>）; 
 $（'。deletebutton'）。 
} 
  

它应该变成：

 < li> 
< label> < /标签> 
< div class =deletebutton> 
< input type =buttonid =ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1value =Removeclass =ruButton ruRemovename =RemoveRow> 
< / div> 
< / li> 
  

当我点击按钮时。在点击html之前：

 < li> 
< input type =buttonid =ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1value =Removeclass =ruButton ruRemovename =RemoveRow> 
< / li> 
  

解决方案

为什么不用一个函数你只需要第一次点击就可以做什么？

因此，只有在第一次点击该按钮时才会添加div，如果您点击其他时间按钮，它不会执行任何东西。这样你就不会添加多个div。

要做到这一点，您可以使用例如jQuery：

 < script type =text / javascript> 
 
 $（＃firstclick）。one（click，function（）{
 alert（This will be displayed only once。）; 
}）; 
 
< / script> 
  

甚至可以查看关于jQuery API文档：

http://api.jquery.com/one/

I am adding a div around a link on click of a button. but when i click button multiple times, it adds multiple divs.

    <li>
    <label> </label>
    <div class="deletebutton">
        <label> </label>
        <div class="deletebutton">
            <label> </label>
            <div class="deletebutton">
<input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
            </div>
        </div>
    </li>

How can i make sure that it first checks if there is a div around link and then adds.

I am using following code:

var parentTag = $(".ruRemove").parent().get(0).tagName;

if (parentTag == 'LI') {
    $(".ruRemove").wrap("<div class='data deletebutton'></div>");
    $(".deletebutton").before("<label></label>");
} else {

    var par = $('.deletebutton').parent();
    if (par.is('div')) par.remove();
    $(".ruRemove").wrap("<div class='data deletebutton'></div>");

    var prev = $('.deletebutton').prev();
    if (prev.is('label')) prev.remove();
    $('.deletebutton').before("<label></label>");
}

it should become this:

  <li>
                <label> </label>
                <div class="deletebutton">
    <input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
                </div>
        </li>

when i click button. before clicking html is:

  <li>             
    <input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">  
        </li>

解决方案

Why don't you just use for example a function that does what you want only on the first click?

So only on the first click of that button adds the div, if you click other times the button, it wont do anything. This way you wont add multiple divs.

To do that you could use for example jQuery:

<script type="text/javascript">

    $("#firstclick").one("click",function() {
        alert("This will be displayed only once.");
    });

</script>

You can check even the jQuery API Documentation regarding one:

http://api.jquery.com/one/

这篇关于使用jquery添加div链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！