jquery - 親vs最も近い

Question

なぜこれが機能するのですか？

$('.button_30').click(function(){
    $(this).closest('.portlet').find('.portlet_content').text("foo");
});

なぜこれが機能しないのですか？

$('.button_30').click(function(){
    $(this).parent('.portlet').find('.portlet_content').text("foo");
});

ここで、htmlは次のようになります。

<div class="portlet portlet_30">

    <div class="portlet_header portlet_header_30">
        header content here
    </div>

    <div class="portlet_sub_header portlet_sub_header_30">
        <input type="text" class="textbox_30" />
    </div>

    <div class="portlet_content portlet_content_30">
        results go here
    </div>

    <div class="portlet_footer portlet_footer_30">
        <input type="button" class="button_30" />
    </div>

</div>

<div class="portlet portlet_30">

    <div class="portlet_header portlet_header_30">
        header content here
    </div>

    <div class="portlet_sub_header portlet_sub_header_30">
        <input type="text" class="textbox_30 />
    </div>

    <div class="portlet_content portlet_content_30">
        results go here
    </div>

    <div class="portlet_footer portlet_footer_30">
        <input type="button" class="button_30" />
    </div>

</div>

score 38 · Accepted Answer

指定されたセレクターと一致する場合にのみparent()親（直接の祖先）を返すためです。

ただし、すべてのclosest()祖先を検索し、セレクターに一致する最初の祖先を返します。

の親はbutton_30でありdiv、その親はdivのクラスを持つであるportletため、parent()関数はそれに一致せず、空のセットを返しますが、-closest() はそれに一致します。

ここで同様のメソッドのセットを完了するには、がありますparents()。これは、最初に一致した要素に似ていますが、停止しませclosest()ん。セレクターに一致するすべての祖先を返します。

score 35 · Accepted Answer

.parent()直接の祖先のみを調べます。
.closest()すべての祖先と元の要素を調べて、最初の一致を返します。
.parents()すべての祖先を調べ、すべての一致を返します。

score 1 · Accepted Answer

parent()parents()1つ上のレベルにしか見えないので、ずっと上に検索してみることができます

$('.button_30').click(function(){
    $(this).parents('.portlet').find('.portlet_content').text("foo");
});

あなたはドキュメントを見ることができます

score 1 · Accepted Answer

[ closest^{API Ref]}メソッドは、セレクターの一致を見つけるために必要な限り、祖先ツリーをトラバースします。

[ parent^{API Ref]}メソッドは、直接の親のみを調べます。

score 1 · Accepted Answer

このparentメソッドは、要素のチェーンの1つ上のレベルのみをclosestチェックしますが、一致が見つかるまで（または、htmlタグに到達するまで）親のリストをチェックし続けます。同等のものは次のとおりです。

$('.button_30').click(function(){
    $(this).parents('.portlet:eq(0)').find('.portlet_content').text("foo");
});

score 0 · Accepted Answer

2番目のセレクターでは、親を探しており、この関数 DOMはノードの父に移動しますが、セレクターに渡して操作するクラスではなく、クラスがone level含まれている場合にのみ、 2つのレベルを移動する必要があります。。portlet_footer portlet_footer_30.portletparent

each time that you're using parent you move one node up

score 0 · Accepted Answer

一致する要素.portletは祖父母のみであり、イベントがバインドされている要素の親ではないため

jquery - 親vs最も近い

7 に答える 7

Related

Reference