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

jQueryトラバース - 子孫


子孫は、というように、子、孫、ひ孫で、と。

jQueryのを使用すると、要素の子孫を見つけるために、DOMツリーを下にトラバースすることができます。


DOMツリーをトラバースします

DOMツリーをトラバースするための二つの有用なjQueryのメソッドは次のとおりです。

  • children()
  • find()

jQueryのchildren()メソッド

children()メソッドは、選択した要素のすべての直接の子を返します。

このメソッドは、DOMツリーダウン単一レベルを通過します。

次の例では、各々の直接の子であるすべての要素を返す<div>要素を:

$(document).ready(function(){
    $("div").children();
});
»それを自分で試してみてください

また、子供のための検索をフィルタリングするためにオプションのパラメータを使用することができます。

次の例では、すべて返す<p>クラス名を持つ要素の"first"の直接の子である、 <div>

$(document).ready(function(){
    $("div").children("p.first");
});
»それを自分で試してみてください

jQueryのfind()メソッド

find()メソッドは、すべての方法最後の子孫に至るまで、選択した要素の子孫要素を返します。

次の例では、すべて返す<span>の子孫である要素<div>

$(document).ready(function(){
    $("div").find("span");
});
»それを自分で試してみてください

次の例は、のすべての子孫を返す<div>

$(document).ready(function(){
    $("div").find("*");
});
»それを自分で試してみてください

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

演習1» 演習2» 演習3» 演習4»


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

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