jQueryトラバーシング - 子孫

jQueryを使用すると、DOMツリーをたどって要素の子孫を見つけることができます。

子孫とは、子、孫、ひ孫などです。

DOMツリーをたどる

DOMツリーをたどるのに役立つ2つのjQueryメソッドは次のとおりです。

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

このメソッドは、DOMツリーを1レベル下にトラバースするだけです。

次の例では、各<div>要素の直接の子であるすべての要素が返されます。

$(document).ready(function(){ $("div").children(); });

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

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

$(document).ready(function(){ $("div").children("p.first"); });

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

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

$(document).ready(function(){ $("div").find("span"); });

次の例では、<div>のすべての子孫を返します。

$(document).ready(function(){ $("div").find("*"); });

すべてのjQuery Traversingメソッドの完全な概要については、次のWebサイトにアクセスしてください。jQueryトラバーシングリファレンスを参照してください。