TECH I.S.

jQueryトラバーシング - 兄弟

jQueryを使用すると、DOMツリーを横方向にトラバースして、要素の兄弟を見つけることができます。

兄弟は同じ親を共有します。

DOMツリーの横方向のトラバース

DOMツリーを横方向にトラバースするための便利なjQueryメソッドが多数あります。

  • 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()メソッドは、選択された要素の次の兄弟要素を返します。

次の例は、<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 Traversingメソッドの完全な概要については、jQueryトラバーシングリファレンスを参照してください。



チュートリアル