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元素。同时，我们还使用jQuery设置li的类和文本。

父母和appendto不一起工作？

2 个答案: