jQuery入門 | 要素の探索 | 下位要素の探索 .children() .find()

下位(descendant:子孫)要素の探索

DOMツリーで特定の要素の子孫(descendant)要素を探索するためのメソッドは次のとおりである。

メソッド	説明
.children()	選択した要素の子(child)要素をすべて選択する。
.find()	選択した要素の子孫(descendant)要素のうち、渡されたセレクタに該当する要素をすべて選択する。

.children()メソッドは、選択した要素の子(child)要素をすべて選択する。このとき、セレクタを引数として渡すことで、渡されたセレクタに該当する子要素だけを選択することもできる。

次のようなHTML要素があるとき、

<div>div (祖父)
  <ul>ul (親)
    <li>li (子)
        <span>span (孫)</span>
    </li>
  </ul>
</div>

<ul>要素の子要素をすべて選択し、その要素のCSSスタイルを変更する。

$("ul").children().css({"border": "2px solid red"});

.find()メソッドは、選択した要素の子孫(descendant)要素のうち、渡されたセレクタに該当する下位要素をすべて選択する。このとき、アスタリスク("*")を引数として渡すことで、選択した要素の子孫要素をすべて選択することもできる。

<ul>要素の子孫要素をすべて選択し、その要素のCSSスタイルを変更する。

$("ul").find("*").css({"border": "2px solid red"});