2

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 -->

所以当我点击第一个添加按钮时。添加的段落应仅添加到第一个的add button的父元素中，而不应添加到具有相同类名的其他父元素中。

这是测试页。

我可以修复它吗？或者我一定是写错了？

4

2 回答 2

3

.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))。

于 2011-12-28T21:58:46.913 回答
0

尝试这个：

$(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 中添加的。

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

于 2011-12-28T22:02:49.147 回答