jQueryトラバーシング - 祖先

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

祖先は、親、祖父母、曾祖父母などです。

DOMツリーをたどる

DOMツリーを上に移動するための3つの便利なjQueryメソッドは次のとおりです。

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

このメソッドは、DOMツリーを1レベル上に移動するだけです。

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

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

parents()メソッドは、ドキュメントのルート要素(<html>）に至るまで、選択された要素のすべての祖先要素を返します。

次の例では、すべての<span>要素のすべての祖先が返されます。

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

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

次の例では、<ul>要素であるすべての<span>要素のすべての祖先を返します。

$(document).ready(function(){ $("span").parents("ul"); });

このparentsUntil()メソッドは、指定された2つの引数の間にあるすべての祖先要素を返します。

次の例では、<span>要素と<div>要素の間にあるすべての祖先要素を返します。

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

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