JavaScript の最も近い() メソッドは、最も近い祖先、つまりセレクターに一致する要素の親を取得するために使用されます。祖先が見つからない場合、メソッドは戻ります。 ヌル 。
このメソッドは、ドキュメント ツリー内の要素とその親を走査し、指定されたセレクター文字列に一致する最初のノードが見つかるまで走査を続けます。
構文
targetElement.closest(selectors);
上記の構文では、 セレクター セレクターを含む文字列です (例: p:ホバー 、など) ノードを見つけるために使用されます。
いくつかの図を使用してこの方法を理解しましょう。
例1
この例では、3 つの div 要素と見出しを適用しています。 最も近い() 方法。ここで使用しているセレクターは次のとおりです。 ID セレクタ、 子孫 セレクタ、 子供 セレクターと、 ：ない セレクタ。
This is the first div element. <h3 id="h"> This is a heading inside the div. </h3> This is the div inside the div element. This is the div element inside the second div element. var val1 = document.getElementById('div3'); var o1 = val1.closest('#div1'); var o2 = val1.closest('div div'); var o3 = val1.closest('div > div'); var o4 = val1.closest(':not(#div3)'); console.log(o1); console.log(o2); console.log(o3); console.log(o4);今すぐテストしてください
出力
パンダロック
上記のコードを実行すると、出力は次のようになります -
例2
これは別の使用例です JavaScript さんの 最も近い() 方法。
This is the div element. <p id="p1"> This is the paragraph element inside the div element. </p><h3 id="h"> This is the child of the paragraph element. <p id="p2"> This is the child of heading element of the paragraph element. </p> </h3> <p></p> var val1 = document.getElementById('p2'); var o1 = val1.closest('p'); var o2 = val1.closest('h3'); var o3 = val1.closest('div'); console.log(o1); console.log(o2); console.log(o3);今すぐテストしてください
出力
上記のコードを実行すると、出力は次のようになります -
