jQuery 遍歴 - find() メソッド

jQuery 遍历リファレンスマニュアル

例

すべての段落の後裔 span 要素を検索し、その色を赤に設定します：

$("p").find("span").css('color','red');

自分で試してみてください

定義と用法

find() メソッドは、選択子、jQueryオブジェクト、または要素を通じて、現在の要素集合中の各要素の後裔を取得します。

構文

.find(selector)
パラメータ 説明
selector 現在の要素集合に一致するための選択子表現を含む文字列値

詳細な説明

DOM要素集合を表すjQueryオブジェクトが与えられた場合、.find() メソッドはDOMツリー内でこれらの要素の後裔を検索し、一致する要素で新しいjQueryオブジェクトを構築することができます。.find() は .children() メソッドと似ていますが、後者はDOMツリーを単一のレベルに沿って遍歴するだけです。

.find() メソッドの最初の明確な特徴は、$() ファンクションに渡す式のタイプと同じ選択子表現を受け取ることです。要素がその式に一致するかどうかをテストすることで要素をフィルタリングします。

以下のシンプルなネストされたリストを考えてみてください：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

リストIIから始めてリスト項目を検索します：

$('li.item-ii').find('li').css('background-color', 'red');

自分で試してみてください

この調査の結果は、プロジェクトA、B、1、2、3およびCがすべて赤い背景に設定されています。プロジェクトIIが選択子表現に一致する場合でも、結果には含まれません；後裔に対してのみマッチングが行われます。

他の木構造の遍历メソッドとは異なり、選択子表現は.find()に対して必須のパラメータです。すべての後裔要素を取得する必要がある場合、ワイルドカード選択子'*'を渡すことができます。

選択子contextは.find()メソッドで実現されています；したがって、$('li.item-ii').find('li')は$('li', 'li.item-ii')と等価です。

jQuery 1.6では、指定されたjQueryコレクションや要素を使用してフィルタリングを行うことができます。上記のネストリストの場合、まず以下のように書きます：

var $allListElements = $('li');

その後、このjQueryオブジェクトをfindメソッドに渡します：

$('li.item-ii').find( $allListElements );

自分で試してみてください

上記のコードは、リスト IIの後裔に属するリスト要素を含むjQueryコレクションを返します。

同様に、要素を渡すこともできます：

var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');

自分で試してみてください

この呼び出しの結果は、プロジェクト 1 が赤い背景に設定されています。

jQuery 遍历リファレンスマニュアル