父母和附录不一起工作？

Question

jquery.parents和jquery.append似乎不能一起工作，例如，我想只向单击按钮的父元素添加一个新元素，

   $('.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 -->

因此，当我单击第一个添加按钮时，添加的

段落应仅添加到第一个的"添加"按钮的父元素中，而不应添加到具有相同类名的其他父级元素中。

这是测试页面。

我可以修复它吗？或者我一定编码错了？

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

例。

请注意，on()是在jQuery 1.7中添加的。

我们将单击处理程序附加到具有类 local 的任何元素。单击时，它将向上遍历 DOM，直到找到类 block 的最近元素。它将其背景颜色设置为黄色，然后选择其子ul类items。然后，它会追加新的li元素。同时，我们还使用 jQuery 设置了li的类和文本。