使用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鏈接使用

回答

相關問題