jQuery 過濾 - 同胞

同胞は同じ親要素を持ちます。

jQueryを使用して、DOM木の中で要素の同胞要素を遍歴することができます。

DOM木内での水平遍歴

DOM木の中で水平に遍歴するための多くの便利なメソッドがあります:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

jQuery siblings() メソッド

siblings() メソッドは、選択された要素のすべての同胞要素を返します。

以下の例では、<h2>のすべての同胞要素を返します:

$("document").ready(function(){
  $("h2").siblings();
});

実際に試してみてください

オプションのパラメータを使用して、同胞要素の検索をフィルタリングすることもできます。

以下の例では、<h2>の同胞要素に属するすべての<p>要素を返します:

$("document").ready(function(){
  $("h2").siblings("p");
});

実際に試してみてください

jQuery next() メソッド

next() メソッドは、選択された要素の次の同胞要素を返します。

このメソッドは、1つの要素しか返しません。

以下の例では、<h2>の次の同胞要素を返します:

$("document").ready(function(){
  $("h2").next();
});

実際に試してみてください

jQuery nextAll() メソッド

nextAll() メソッドは、選択された要素のすべての続く同胞要素を返します。

以下の例では、<h2>のすべての続く同胞要素を返します:

$("document").ready(function(){
  $("h2").nextAll();
});

実際に試してみてください

jQuery nextUntil() メソッド

nextUntil() メソッドは、指定された2つのパラメータ間のすべての続く同胞要素を返します。

以下の例では、<h2>と<h6>要素間のすべての同胞要素を返します:

$("document").ready(function(){
  $("h2").nextUntil("h6");
});

実際に試してみてください

jQuery prev(), prevAll() & prevUntil() メソッド

prev(), prevAll() および prevUntil() メソッドは、上記のメソッドと同様の動作をしますが、方向が逆です:これらは、DOM木の中で同胞要素に沿って後方に進むのではなく前方に進む前の同胞要素を返します。

jQuery 遍歴リファレンスマニュアル

すべての jQuery 遍歴メソッドについて詳しく知りたい場合は、私たちの jQuery 遍歴リファレンスマニュアル