jQueryのfind()メソッドとは？初心者向けステップバイステップ解説

jQueryのfind()メソッドという名前は聞き覚えがあるかもしれませんが、JavaScriptのfind()メソッドと混同しないよう注意が必要です。どちらも「見つける」ためのメソッドですが、返す結果はまったく異なります。

JavaScriptのfind()メソッドは、配列に対してのみ呼び出せるメソッドです。引数として渡され後から実行される「コールバック関数」を受け取り、そのコールバック関数で定義された条件を満たす最初の要素を見つけて返します。

一方、jQueryのfind()メソッドは大きく性質が異なります。すべてのjQueryメソッドと同様にセレクターに対して呼び出され、そのセレクターの中を検索し、子要素だけを操作対象とします。この絞り込み操作は、同じ親要素内にある一部の要素だけを変更したい場合などに非常に便利です。

jQuery find()の基本的な使い方

jQueryのfind()は、指定したセレクターの子要素をすべて選択するために使われます。まずはシンプルなサンプルコードを見ながら、実際の使い方を確認していきましょう。

最初は簡単な例から始めて、後半で少しずつ複雑なケースにも挑戦します。ページ読み込み後に要素を操作することで、find()の動作をわかりやすく説明できます。ここでは、段落の中にある特定の単語の色を、ページ読み込み時に変更してみましょう。まずはHTMLの準備です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
jQuery find() method example
</h2>
  <p>
  This is an example paragraph. 
  </p>
  <p>We are going to change the color <span>blue</span> to the color blue.</p>
<div class="green">We are going to change the word <span>green</span> to the color green.</div> 
<p>
Every other will word will stay the same. 
</p>

</div>

このコードを見ると、<p>要素の中に複数の<span>要素が含まれていることがわかります。一方の<span>は<p>要素の子要素であり、もう一方の<span>はclass属性に「green」を持つ<div>の子要素です。段落の文章にある通り、<span>で囲まれた単語だけ色を変更します。まずはHTMLが正しく表示されているか確認しましょう。

HTMLは正常に表示されています。次に、find()の動きを示すためにテキストの色を変更していきます。これは初心者にとって最適な練習ステップです。CSSプロパティを1つ変更するだけで実現できるからです。<p>要素をセレクターとしてfind()に渡しながら、jQueryのcss()メソッドを使って色を変更します。

<script>
$(document).ready(() => {
  $('p').find('span').css('color', 'blue');
  $('div.green').find('span').css('color', 'green');
})
 
</script>

1行目のfind()では、すべての<p>要素を選択しています。find()によって、<p>の子要素である<span>要素を探し出します。この例では該当するのは「blue」という単語だけです。続いてcss()メソッドで文字色を青に変更しています。

2行目のfind()では、class属性が「green」の<div>を選択し、そこに対してfind()を呼び出しています。今度は<div>の子要素である別の<span>要素が検索対象となります。

こちらも該当するのは「green」という単語だけです。1行目と同様にcss()メソッドを使って、文字色を緑に変更します。それでは実行して結果を確認してみましょう。

注目すべきは、「blue」と「green」の両方の単語が、classもidも持たない<span>要素で囲まれていたことです。それでもそれぞれの単語を個別に切り分けて色を変更できました。理由はお察しの通り、<span>の親要素が異なるためです。

「blue」の<span>の親は<p>要素、「green」の<span>の親は<div class='green'>です。このようにfind()は、セレクターとして指定した要素の子孫を検索するため、親要素を変えることで操作対象を柔軟に制御できるのです。

リストでのjQuery find()活用例

次の例ではToDoリストを扱います。今日やるべきタスクがあり、そのタスクを行うために買い物も必要な状況を想定しましょう。必要なものを購入したら、リストからチェックして先へ進むイメージです。以下がそのリストです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
<h2>
To Do list example
</h2>
<ul>
  <li class="store">Go to the store
    <ul>
      <li>Trash bags</li>
      <li>Dish Soap</li>
    </ul>
  </li>
  <li>Take out the trash</li>
  <Li>Wash the dishes</Li>
</ul>
</div>

このリストには「Go to the store（買い物に行く）」「Take out the trash（ゴミを出す）」「Wash the dishes（皿を洗う）」という3つの<li>要素があります。これらは<ul>要素の子要素であり、さらに<ul>はid属性が「main」の<div>の子要素です。「買い物に行く」項目の中には、スーパーで買うべき品物が入っています。今日の家事を完了するにはゴミ袋と食器用洗剤が必要なので、これらをclass属性が「store」の<li>の子要素としてネストされたリスト形式で記述しました。

それでは、買い物を済ませたらリストの該当項目に取り消し線を引いてみましょう。

<script>
$(document).ready(() => {
  $('li.store').find('li').css('text-decoration', 'line-through')
})
</script>

class属性が「store」の<li>を選択し、find()でその子要素である<li>要素を特定することで、リスト内の該当項目だけに取り消し線を引けます。ここでもjQueryのcss()メソッドを使用し、「text-decoration」プロパティに「line-through」の値を適用しています。これにより、選択された項目に取り消し線が表示されます。

まとめ

jQueryのfind()メソッドは、セレクターとして渡された要素の子孫要素をすべて検索します。そして、子要素のみを操作対象とし、親要素自体には一切影響を与えません。

どの子要素を選択するかを細かく制御できることで、ページ全体の大きなセクションを一括変更することも、特定の要素だけをピンポイントで変更することも可能になります。find()が最も威力を発揮するのは、まさにこの柔軟性があるからこそです。