родители и appendto не работают вместе?

Question

jquery.parents и jquery.appendTo, кажется, не работают вместе, например, я хочу, чтобы добавить новый элемент только родителя, по которым щелкнули кнопки элемента,

$('.local').click(function(){ 

    var object = $(this); 
    var parent = object.parents('.block').css({background:'yellow'}); 
    $('<li class="item"></li>').appendTo('.items',parent).html('\ 
     <p>added</p>\ 
    '); 

    return false; 
}); 

HTML,

<!-- block --> 
<div class="block"> 

    <ul class="items"></ul> 
    <ul class="menu"> 
     <a href="#" class="local">add</a> 
    </ul> 

</div> 
<!-- block --> 

<!-- block --> 
<div class="block"> 

    <ul class="items"></ul> 
    <ul class="menu"> 
     <a href="#" class="local">add</a> 
    </ul> 

</div> 
<!-- block --> 


<!-- block --> 
<div class="block"> 

    <ul class="items"></ul> 
    <ul class="menu"> 
     <a href="#" class="local">add</a> 
    </ul> 

</div> 
<!-- block --> 

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

Вот test page.

Могу ли я исправить это? Или я должен был закодировать это неправильно?

Answer 1

.appendTo() не работает так же. Попробуйте это:

$('.local').click(function(){ 

    var object = $(this); 
    var parent = object.parents('.block').css({background:'yellow'}); 
    $('<li class="item"></li>').appendTo($('.items',parent)).html('\ 
     <p>added</p>\ 
    '); 

    return false; 
}); 

Вместо .appendTo('.items',parent)), она должна быть .appendTo($('.items',parent)).

Answer 2

Попробуйте это:

$(document).on("click", ".local", function(){ 
    $(this) 
     .closest(".block") 
     .css("background-color","yellow") 
     .find("ul.items") 
     .append($("<li>") 
      .attr("class","item") 
      .html($("<p>").html("added")); 
     ); 
}); 

Example.

Обратите внимание, что в jQuery 1.7 добавлено on().

Мы прикрепляем обработчик кликов к любому элементу класса local. Когда вы нажмете, он переместит DOM, пока не найдет ближайший элемент с классом block. Он устанавливает цвет фона в желтый, затем выбирает его дочерний элемент ul с классом items. Затем он добавляет новый элемент li. Между тем, мы также установили класс и текст li с помощью jQuery.