jQuery トラバース - 祖先

❮ 前章へ 次章へ ❯

祖先とは、親、祖父、曾祖父などの総称です。

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


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

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


jQuery parent() メソッド

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

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

次の例は、各 <span> の直接の親要素を返します:

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

jQuery parents() メソッド

parents() メソッドは、文書のルート要素 (<html>) までの全ての経路を上方にたどり、 選択した要素の全ての祖先要素を返します。

次の例は、全 <span> 要素の、全祖先を返します:

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

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

次の例は、全 <span> 要素の全ての祖先のうち、<ul> 要素のみを返します:

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

jQuery parentsUntil() メソッド

parentsUntil() メソッドは、2 つの指定したアーギュメント間にある全ての祖先要素を返します。

次の例は、<span> と <div> 要素の間の全ての祖先要素を返します:

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

練習問題で確認テスト!

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


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

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


❮ 前章へ 次章へ ❯