2013-10-19 4 views
7

jQueryのdocumentation状態jQuery Closest - どのように動作しますか?セット内の各要素について

、素子自体をテストし、DOMツリー内のその祖先を介してアップトラバースすることによってセレクタに一致する最初の要素を取得します。

操作上のここの言葉は、私の目には、祖先です。これは、もし使用されるならば、それが暗示されていることを暗示します。セレクタはelemの祖先ではありません。それは私はそれがすべての道を行くことを意味するものとして解釈供給セレクタ

の一致が見つかるまで、それはDOMツリーアップ

旅行を読み込み、同じドキュメント内のダウンしかし、少し低いですその人を得るために<本体>タグまで。注:親のまたは先祖の言及はありません。ここに注意してください。

私は速い書簡を書いています。それは正しい前のステートメントであることを示唆しています。しかし、私はここに投稿し、誰かがこれを確認できるかどうかを確認することを最善と考えました。

+0

2つのステートメントは互いに排他的ではなく、実際には同じことを意味します。実際にはタグに行き、ドキュメントルートを実行します。 –

+0

あなたは正しいと思います。どちらの声明も間違っています。しかしそれはまだ私に少し混乱を感じさせる。私のフィドルでは、最初の入力には、直属の祖先としてdata-x属性を持つdivがあり、それを見つける最も近いレポートがあります。 2番目の入力には祖先のようなdivはありませんが、親divの兄弟として存在しますが、見つからない – DroidOS

答えて

7

(擬似コードで)このような.closest()作品の実装:すなわち

while (node) { 
    if (node matches selector) { 
    return node; 
    } 
    node := node.parentNode 
} 

、それが唯一の親チェーンを追跡することによってアップ横切ります。

+0

あなたの疑似コードは、私が見ている動作を確認します。 'node:= node.previous'は私がどのように文書を解釈したかです。 – DroidOS

+0

@DroidOSこれは '.prevAll(selector).first()'の動​​作です:) –

4

2番目の引用符で「DOMツリーを移動する」と言われるときは、最初の引用符で「DOMツリーの祖先を突き抜ける」という意味です。引用された両方のステートメントの間に違いはありません。 1つはもう少し具体的にしか起こらない、他の言い換えの言い換えです。

+0

しかし、その場合、私のフィドルの2番目の入力をクリックするのはなぜですか? data-x属性を直接の親として持つdivは、何も見つけられません。それがDOMツリーの途中にあるならば、それはdata-x属性を持つ最初の入力の親divを見つけたはずです。 – DroidOS

+0

@DroidOS:はい、何も見つかりません。 2番目の入力の親でないときに、最初の入力の親を見つけたのはなぜですか? – BoltClock

+0

これは私が混乱するものです。今あなたは_parent_を話しています。 1分前にDOMツリーを上っていくことを話していました。私が理解しているDOMツリーの上に行くのは、それが親であるかどうかに関わらず、その人を取得するということです。ドキュメントには、親はまったく言及されていないことに注意してください。 – DroidOS

1

jQuery closest()は、セレクタの最初の親要素(HTMLタグ)またはセレクタ自体(一致する場合)を選択します。 'p'要素($( 'p#someid'))を選択すると、 'p'要素からの検索が開始され、一致しない場合は親要素に移動します。そしてそう

上の例HTML:

<div id='select_me'>Div 
    <p id='id'>paragraph</p> 
</div> 

$( '#IDは')に最も近い親のdiv

として

として、( 'DIV)// DIV#1 select_meを選択します最も近いです。

<p id='select_me'>Div 
    <p id='select_me_now'>paragraph</p> 
</p> 

$( '#select_me_now')closest(p); // select p_ select_me_nowそれ自体を選択します

1

.closest()メソッドは、DOMツリー内のこれらの要素とその祖先を検索し、一致する要素から新しいjQueryオブジェクトを構築します。

例:それはDOMツリーを旅行するときに遭遇する最初のものであるので、

$("li.item-a").closest("ul").css("background-color", "red"); 

これは、レベル2の色を変更します。