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

したがって、最初の追加ボタンをクリックすると。追加された段落は、最初の追加ボタンの親の要素にのみ追加する必要がありますが、同じクラス名を持つ他の親には追加しないでください。

これがテストページです。

修正できますか？または私はそれを間違ってコーディングしたに違いありませんか？

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()これはjQuery1.7で追加されたことに注意してください。

クラスを持つ任意の要素にクリックハンドラーをアタッチしますlocal。クリックすると、クラスが最も近い要素が見つかるまでDOMをトラバースしますblock。背景色を黄色に設定してからul、クラスを持つ子を選択しitemsます。li次に、新しい要素を追加します。一方、lijQueryを使用してのクラスとテキストも設定します。

于 2011-12-28T22:02:49.147 に答える