добавление div вокруг ссылки с помощью jquery

Question

Я добавляю div по ссылке по щелчку кнопки. но когда я нажимаю кнопку несколько раз, он добавляет несколько 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> 

Answer 1

Вот решение, показанное в 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>. Если это не a div, тогда мы завершаем кнопку в div и в конце. При следующем вызове обнаружение родителя, являющегося div, будет истинным, и новый div не будет добавлен.

Answer 2

Почему бы вам просто не использовать, например, функцию, которая делает то, что вы хотите, только при первом нажатии?

Таким образом, только при первом нажатии этой кнопки добавляется div, если вы нажмете еще раз кнопку, это не сделает ничего. Таким образом, вы не будете добавлять несколько div.

Для этого можно использовать, например, JQuery:

<script type="text/javascript"> 

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

</script> 

Вы можете проверить даже Документация по API JQuery относительно одного:

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