js STUDIO

.find()

現在マッチしている各要素から、指定した条件に合致する子孫要素を選択します。

.find( selector ) 1.0追加

戻り値:jQuery

引数 説明
selector 検索対象をセレクタで指定します。

.find( jQuery object ) 1.6追加

戻り値:jQuery

引数 説明
jQuery object 検索対象をjQueryオブジェクトで指定します。

.find( element ) 1.6追加

戻り値:jQuery

引数 説明
element 検索対象をDOM要素で指定します。

サンプル

.children()との違いは、.children()は１つ下の層である子要素のみを対象とするのに対し、 .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>

下記の処理を実行すると、A,B,1,2,3,Cが対象となり、背景が赤に変更されます。 マッチしていた自身の要素も.find()にしているLI要素ですが、これは対象になりません。 .find()は子孫要素のみを対象とします。 

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

他のトラバーサルメソッドと違い、セレクタなどの引数の指定は必須となります。 もし全ての子孫要素を取得したい場合は、"*"セレクタを指定してください。

$('li.item-ii').find('li')と$('li', 'li.item-ii')は等価になります。

デモ

全てのP要素内からSPAN要素をセレクタで指定して、フォント色を赤くします。 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><span>こんにちは</span>, 調子はどうだい?</p>
<p>私?<span>良い感じだよ。</span></p>
<script>
  $("p").find("span").css('color','red');
</script>
</body>
</html>

全てのP要素内からSPAN要素をjQueryオブジェクトで指定して、フォント色を赤くします。 DIV要素ないのSPAN要素は対象外になっていることに注目してください。 

<!DOCTYPE html>
<html>
<head>
<style>
  span { color: blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><span>こんにちは</span>, 調子はどうだい?</p>
<p>私?<span>好調だよ。</span>.</p>
<div>ご飯は<span>食べた</span>？</div>
<script>
  var $spans = $('span');
  $("p").find( $spans ).css('color','red');
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM