jQuery トラバーサル - 兄弟

jQuery Traversal - 兄弟

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

jQuery を使用すると、DOM ツリー内の要素の兄弟要素をトラバースできます。

DOM ツリーの水平方向のトラバース

DOM ツリーを水平方向にトラバースできる便利なメソッドがたくさんあります:

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

jQuery Brothers() メソッド

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

次の例は、<h2> のすべての兄弟要素を返します:

Example

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

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

次の例は、<h2> の兄弟であるすべての <p> 要素を返します。

Example

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

jQuery next() メソッド

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

このメソッドは 1 つの要素のみを返します。

次の例は、<h2> の次の兄弟要素を返します。

例

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

jQuery nextAll() メソッド

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

次の例は、<h2> の後続のすべての兄弟要素を返します。

Example

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

jQuery nextUntil() メソッド

nextUntil() メソッドは、指定された 2 つのパラメーターの間にある後続のすべての兄弟要素を返します。

次の例は、<h2> 間のすべての兄弟要素を返します。 prevAll() メソッドと prevUntil() メソッドは上記のメソッドと同様に動作しますが、方向が逆です。つまり、前の兄弟要素を返します (兄弟要素を逆方向に走査します)。前方ではなく DOM ツリー)。