jQuery トラバース - 子孫

❮ 前章へ 次章へ ❯

子孫とは、子、孫、曾孫などの総称です。

jQuery により、要素の子孫を検索するために、DOM ツリーを下にたどることができます。


DOM ツリーを下方にトラバース

DOM ツリーを下にトラバースする、次の 2 つの便利な jQuery メソッドがあります:


jQuery children() メソッド

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

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

次の例は、各 <div> の直接の子である全要素を取得します:

$(document).ready(function(){
    $("div").children();
});
Try it Yourself »

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

次の例は、<div> の直接の子要素で、クラス名が "first" である全 <p> 要素を返します:

$(document).ready(function(){
    $("div").children("p.first");
});
Try it Yourself »

jQuery find() メソッド

find() メソッドは、最後の子孫までの全ての経路を下方にたどり、 選択した要素の全ての子孫要素を返します。

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

$(document).ready(function(){
    $("div").find("span");
});
Try it Yourself »

次の例は、<div> の全子孫要素を取得します:

$(document).ready(function(){
    $("div").find("*");
});
Try it Yourself »

練習問題で確認テスト!

練習問題 1 »  練習問題 2 »  練習問題 3 »  練習問題 4 »


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

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


❮ 前章へ 次章へ ❯