.find()でjQueryオブジェクトを絞り込もう!

.find()でjQueryオブジェクトを絞り込もう!

セレクタで選択したjQueryオブジェクトを別のセレクタで絞り込み、子孫要素を取得するメソッドです。

.find()と.each()で要素を扱おう!

<ul>
    <li>jQuery</li>
    <li>.find()</li>
    <li>sample</li>
</ul>
$('ul').find('li').each(function() {
    console.log($(this).text());
});
jQuery
.find()
sample

ul要素を選択した後、li要素で絞り込み、.each()でjQueryオブジェクトを繰り返すサンプルです。

.each()のコールバック関数では、.text()で文字列を取得し、console.logでコンソール出力しています。

.find()の戻り値は?

絞り込まれたjQueryオブジェクトを返します。

$(selector)で選択した場合と同様、.each()等で操作できます。

.find()で複数条件を使うには?

AND条件(かつ)で検索するには?

<ul>
    <li class="find-1 find-4"></li>
    <li class="find-2 find-5"></li>
    <li class="find-3 find-6"></li>
</ul>
$('ul').find('.find-1.find-4')

AND条件で検索するには、条件をスペースなしで繋げます。

サンプルでは、ul要素を選択した後、.find()に’.find-1.find-4’を渡し、find-1とfind-4両方のclassを持つ要素に絞り込んでいます。

スペースを入れると子孫要素の選択になってしまうので、注意しましょう。

‘.find-1 .find-4’は、.find-1の子孫要素で.find-4の要素が選択されます。

OR条件(または)で検索するには?

$('ul').find('.find-1, .find-2')

OR条件で複数の要素を選択するには、セレクタをカンマ区切りで指定します。

サンプルでは、セレクタでul要素を選択した後、.find()でfind-1かfind-2のclassを持つ要素に絞り込んでいます。

name属性で検索するには?

<form>
    <input name="find_1" />
    <input name="find_2" />
    <input name="find_3" />
</form>
$('form').find('input[name="find_2"]')

form要素を選択した後、.find()に渡したセレクタで、name属性がfind_2の要素を検索しています。

value属性で検索するには?

<input type="text" name="name_selector" value="value-selector" />
$('input').filter(function() {
    return this.value === 'value-selector-cahnged'
})

.find()では変更後のvalue属性を検索できません。

value属性を検索する場合、.filter()を使用し、現在のvalue値と検索文字列を比較します。

サンプルの検索文字列は’value-selector-cahnged’ですが、任意の文字列に変更できます。

子要素だけを検索するには.children()を使おう!

<div class="parent">
    <div class="child">
        <div class="grandson"></div>
    </div>
    
    <div class="child">
        <div class="grandson"></div>
    </div>
</div>
$('.parent').find('div')

このコードでは、.parentの子要素の.childだけでなく、孫要素の.grandsonまで選択されてしまいます。

$('.parent').children('div')

.children()を使えば、子要素の.childだけが選択されます。

テキスト文字列で検索するには?

<ul>
    <li>jQuery</li>
    <li>.find()</li>
    <li>sample</li>
</ul>
$('ul').find(':contains("find")')

ul要素を選択し、’:contains(“find”)’で’find’を含む要素を検索しています。

サンプルでは、findを含む<li>.find()</li>のみが選択されます。

findを変更すれば、他のテキスト文字列でも検索できます。

:first, :eq(0), :lt(1)で最初の要素を選択しよう!

$('ul').find(':first')
$('ul').find(':eq(0)')
$('ul').find(':lt(1)')

最初の要素を選択するには、:first, :eq(0), :lt(1) のいずれかを使用します。

サンプルは全て同じ動作になります。

まとめ

  • .find()は.each()と組み合わせて使用できます。
  • .find()の戻り値はjQueryオブジェクトです。
  • .find()のAND条件はスペースなしで結合、OR条件はカンマ区切りです。
  • name属性で検索するには、[name=”string”]を使用します。
  • value属性で検索するには、.filter()を使います。
  • 子要素だけを検索するには、.children()を使います。
  • テキスト文字列で検索するには、:contains(“string”)を使用します。
  • 最初の要素を選択するには、:first, :eq(0), :lt(1)を使用します。

メソッドカテゴリの最新記事