最新のWeb開発のチュートリアル
 

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ツリー内の兄弟要素に沿って後方にトラバース）前の兄弟要素を返します。

練習で自分自身をテスト！

演習1» 演習2» 演習3» 演習4» 演習5» 演習6»

jQueryのトラバースリファレンス

すべてのjQueryトラバース・メソッドの完全な概要については、当社をご覧くださいjQueryのトラバースリファレンス 。


❮前 次の章❯