1

DOMを最も近いDIVまでトラバースしようとしています。以下のマークアップは以下のとおりです。

<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>

次のいずれかを使用する場合：

$('.anchor').closest('div').css('background-color', 'red');
$('.anchor').parents('div').css('background-color', 'red');
$('.anchor').parent().parent().css('background-color', 'red');

次のようにすべてのDIVに影響します。

<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>

真ん中のアンカーをクリックする場合は、次のようにします。

<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div style="background-color: red">
     <span>
           <a class="anchor">Text</a>
     </span>
</div>
<div>
     <span>
           <a class="anchor">Text</a>
     </span>
</div>

closest()一般的にDIVに一致しているので、クリックされたアンカーに最も近いDIVとして3つのDIVすべてに一致する理由がわかります。

ただし、使用する場合、parents()またはparent()他のDIVがクリックアンカーの親ではないほど明確ではありません。しかし、DOMのそのレベルでDIVと一般的に一致している可能性がある場所もわかります。マッチングするときは、コンテキストコンテキストのように見えparents()、維持する必要がありますが。parent()

4

4 に答える 4

8

を指定すると、セレクターに$(".anchor")一致するページ内のすべてのオブジェクトが検索され、各オブジェクトが1つずつ実行されます。クリックされたオブジェクトの親divのみにスコープを設定する場合は、次のように、クリックオンオブジェクトを呼び出しの開始点として使用する必要があります。.anchor.closest('div').css('background-color', 'red').closest('div')

$(this).closest('div').css('background-color', 'red');

これは、オブジェクトから開始してクリックされた親divにのみ影響しthisます。

クリックハンドラーのコードは表示されていませんが、次のようになります。

$(".anchor").click(function() {
    $(this).closest('div').css('background-color', 'red');
});

または、前のクリックで赤くなった可能性のある他のアイテムをクリアしてから、これを赤にしたい場合は、次のようにします。

$(".anchor").click(function() {
    var master$ = $(this).closest('div')
    master$.siblings().css('background-color', 'white');
    master$.css('background-color', 'red');
});
于 2012-03-15T18:38:24.077 に答える
2

最初のノードクエリは3つの要素$('.anchor')すべてに一致しているため、それ以降に行うすべてのこと（それなど）は、一致する要素ごとに1回ずつ実行されます。クリックハンドラーでこれらのアプローチのいずれかを使用する場合、1つの要素に対してのみ起動するため、問題は発生しません。<a>closestparents

を使用して直接追加したCSSを整理するよりも少し簡単なので、クラスを追加/削除したほうがよいでしょう.css()。

于 2012-03-15T18:39:22.390 に答える
1

$('.anchor').closest('div')すべての.anchor要素を検索し、最も近いdivを検索して、それらすべてに背景色を適用します。

thisクリックハンドラー内でクリックされている要素を参照するために使用する必要があります。

$(this).closest('div')..

これを試して。

$(".anchor").click(function() {
    $(this).closest('div').css('background-color', 'red');
});
于 2012-03-15T18:39:40.793 に答える
1

あなたは試すことができます

$(this).closest('div').css('background-color', 'red');
$(this).parents('div').css('background-color', 'red');
$(this).parent().parent().css('background-color', 'red');

お役に立てれば... ：）

于 2012-03-15T18:51:03.580 に答える