使用jquery添加div链接使用

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

<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>

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

我使用下面的代码：

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>"); 
}

应该成为这样的：

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

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

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

来源

2014-11-21 DotnetSparrow

它不是对我非常的清楚你在找什么对于。您可以在HTML片段之前和之后显示以描述所需的效果吗？ – Kolban 2014-11-21 18:30:28

@Kolban，请检查更新后的问题。 – DotnetSparrow 2014-11-21 18:38:33

下面是jsFiddle中显示的解决方案。

代码故事

HTML

<button id="myButton">My Button</button

的JavaScript

$(function() { 
    $("#myButton").click(function() { 
     if ($(this).parent().get(0).tagName !== "DIV") { 
      $(this).wrap("<div class='myDiv'>"); 
     } 
    }); 
});

什么代码所做的是注册一个点击按钮的回调。点击后，我们询问被点击的按钮的父级，并询问父节点是否具有标签名称“DIV”，这意味着它是<div>。如果它是而不是一个div，那么我们将该按钮包装在一个div中并结束。在下一次调用中，检测父div是否为真，并且不会添加新的div。

来源

2014-11-21 18:47:46 Kolban

为什么不仅仅用一个函数来实现你想要的只是第一次点击？

所以只有在第一次点击该按钮时才会添加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/

来源

2014-11-21 18:55:56

使用jquery添加div链接使用

回答

相关问题