JQuery.closest(),parent(),parents()親を検索するnode_jquery

HTML コード、テスト アドレス: jQuery トラバーサル - close() メソッド

-----コードを貼り付けると、ページ上で自動的に非表示になります（表示されます）。何が起こっているのか誰か教えてくれませんか？
1. item-1 からレベル 3 を検索します (直属の上位を検索します)

コードをコピーします コードは次のとおりです:

$('li.item-1').closest('ul')
$('li.item-1').parent()
$(' li.item- 1').parents().eq(0)

2. item-1 からレベル 2 を検索します (セレクターを通じて親要素を検索します)

コードをコピー コードは次のとおりです:

$('li.item-1').closest('. level-2')
//$('li.item-1').parent('.level-2') //見つからない、parent() メソッドは前のレベルにのみトラバースします。
$('li.item-1').parent().parent() //これは奇妙すぎます!
$('li.item-1').parents('.level-2')

親(selector)でのセレクターの使用法

コードをコピー コードは次のとおりです:

$('li').parent() //レベル-3、レベル-を返します。 2 およびレベル -1 コレクション、これらはすべて li の親要素です
$('li').parent('.level-3') //上記のコレクションからレベル 3 を除外します

3.最も近いメソッドは現在の要素からトラバースを開始しますが、parent() は親要素から開始します。
$('li.item-1').closest('li') // item-1 を返します。 div が div 内にネストされている場合は、その正しさを考慮する必要があります。セレクターを使用します！
4. closet(selector,context) での context パラメータの使用法 現在の要素から context 要素の末尾までトラバースします。 context パラメータがない場合は、ルート ノードまでトラバースします。
ということがわかります。 context パラメータを使用すると、クエリの効率が向上します。

コードをコピー コードは次のとおりです。

var listItemII = document.getElementById('ii '); //Item-II
//var listItemII=$('#ii')、これは機能しません。私は長い間混乱していました。
$('li.item-1').closest('ul', listItemII).css('background-color', 'red');
//結果は item- の親である必要があります1 ul 要素、itemII のサブ要素、
$('li.item-1').closest('#one', listItemII).css('background-color', 'green'); // item-1 の id=1 の要素は itemII の子要素である必要があります。

5. コンテキスト パラメータの解析が見つかりません

コードをコピーします コードは次のとおりです:

closest: function( selectors, context ) {
var ret = [], i, l, cur = this[0 ];
// String
var pos = POS.test( selectors ) || typeof selectors !== "string" ?
jQuery( selectors, context || this.コンテキスト ) :
0 ;
for ( i = 0, l = this.length; i cur = this[i];
while ( cur ) 🎜>if ( pos ? pos .index(cur) > -1 : jQuery.find.matchesSelector(cur, selectors) ) {
//一致する要素が見つかったら、戻り値のコレクションに追加します。次の要素の検索にジャンプします
ret.push( cur );
break;
} else {
cur = cur.parentNode; // DOM ツリーを上にたどり、一致しますthe selector
//上記の処理では、親ノードが存在しない、ルートノードが存在しない、またはコンテキストノードが見つかった(指定された位置に到達した)場合に!
if ( !cur || !cur.ownerDocument || cur === context || cur.nodeType === 11 ) {
break;
}
}
>}
ret = ret.length > 1 ? jQuery.unique( ret ) : ret;
return this.pushStack( ret, "closest", selectors );
JQuery のソース コードについてはあまり詳しくないので、詳細については説明しません。
closest() の定義から、コンテキストと比較した変数 cur=this[i] が DOM オブジェクトであることがわかり、$('#ii') メソッドは JQuery オブジェクトを取得するので、それが渡されます。 (selector, context) メソッドの context パラメーターは、DOM メソッドを通じて取得する必要があります。
jQuery オブジェクトと DOM オブジェクトの変換?
1. オブジェクトを取得します (変数名の前に $ を追加するのは、JQuery 変数と DOM 変数を区別するためです):
jQuery オブジェクトを取得します: var $variable=jQuery オブジェクト
DOM オブジェクトを取得します: var 変数=DOM オブジェクト;
2.jQuery オブジェクトを DOM オブジェクトに変換します:
配列を使用して var cr=$("#cr")[0];
get(index) メソッドを使用して var を変換しますcr=$("#cr") .get(0);
3. DOM オブジェクトを jQuery オブジェクトに変換します:

コードをコピーします コードは次のとおりです:

var cr=document.getElementsById("cr"); //DOM オブジェクトを取得します
var $cr=$(cr);// jQuery オブジェクトに変換します

SO ….
$('li.item-1').closest('#one', $('#ii').get(0)) //
をこのように使うか、ソースコード内に「cur=」を入れる ==context の判定を「$(cur)====$(current)」に変更して両者の使用法を両立させる！
もちろん、ソースコードを変更するのは良い提案ではありませんが、なぜ JQuery 自体がこの方法を使用しないのでしょうか...アドバイスをお願いします。 ！ ！