부모와 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합니다.

on() jQuery를 1.7에서 추가되었다 있습니다.

우리는 클래스 local 어떤 요소에 클릭 핸들러를 연결합니다. 클릭하면 클래스가 block 인 가장 가까운 요소를 찾을 때까지 DOM을 트래버스합니다. 그것은 배경색을 노랑으로 설정하고 ul 자식을 선택합니다. items입니다. 그런 다음 새로운 li 요소를 추가합니다. 한편, li의 클래스와 텍스트도 jQuery로 설정합니다.