jQuery find()で最初の要素だけを取得する方法【初心者向け】

jquery find 最初の要素

jQueryのfind()メソッドを使って、特定の要素から最初の子要素だけを取得する方法を解説します。初心者の方向けに、コード例を交えながら分かりやすく説明します。

find()メソッドですべての子孫要素から最初の要素だけを取得

はじめに

本記事では、jQueryのfind()メソッドを使って、特定の要素配下の多数の子孫要素から、最初の要素だけを取得する方法を解説します。

対象

jQuery初心者の方向けに、コード例を交えながら分かりやすく説明します。

find()メソッドの基本的な使い方

find()メソッドは、指定した要素の子孫要素を全て取得するために使用します。
基本的な構文: $(セレクタ).find(子要素セレクタ)
例： $('#parent').find('.child') -> idが"parent"の要素配下にある、class名が"child"の要素を全て取得

    
      <div id="parent">
        <div class="child">子要素1</div>
        <div class="child">子要素2</div>
        <div class="child">子要素3</div>
      </div>

      <script>
        $(document).ready(function() {
          var children = $('#parent').find('.child');
          // childrenには、class名が"child"の要素が全て格納される
        });
      </script>

最初の要素だけを取得する: first()メソッド

find()メソッドで取得した要素群から、最初の要素だけを取得するには、first()メソッドを組み合わせます。
例： $('#parent').find('.child').first() -> idが"parent"の要素配下にある、class名が"child"の要素のうち、最初の要素だけを取得

    
      <div id="parent">
        <div class="child">子要素1</div>
        <div class="child">子要素2</div>
        <div class="child">子要素3</div>
      </div>

      <script>
        $(document).ready(function() {
          var firstChild = $('#parent').find('.child').first();
          // firstChildには、最初の".child"要素が格納される
        });
      </script>

:first擬似セレクタを使った取得方法

:first擬似セレクタを使うことで、より簡潔に最初の要素を取得できます。
例： $('#parent').find('.child:first') -> idが"parent"の要素配下にある、class名が"child"の要素のうち、最初の要素だけを取得

    
      <div id="parent">
        <div class="child">子要素1</div>
        <div class="child">子要素2</div>
        <div class="child">子要素3</div>
      </div>

      <script>
        $(document).ready(function() {
          var firstChild = $('#parent').find('.child:first');
          // firstChildには、最初の".child"要素が格納される
        });
      </script>

具体的な使用例

リストの最初の項目のスタイルを変更する

    
      <ul>
        <li>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
      </ul>

      <script>
        $(document).ready(function() {
          $('ul li:first').css('font-weight', 'bold');
        });
      </script>

テーブルの最初の行の背景色を変更する

    
      <table>
        <tr>
          <td>セル1</td>
          <td>セル2</td>
        </tr>
        <tr>
          <td>セル3</td>
          <td>セル4</td>
        </tr>
      </table>

      <script>
        $(document).ready(function() {
          $('table tr:first').css('background-color', '#f0f0f0');
        });
      </script>

フォーム内の最初の入力フィールドにフォーカスを当てる

    
      <form>
        <input type="text" name="name" placeholder="氏名">
        <input type="email" name="email" placeholder="メールアドレス">
      </form>

      <script>
        $(document).ready(function() {
          $('form input:first').focus();
        });
      </script>

まとめ

find()メソッドとfirst()メソッド、または:first擬似セレクタを組み合わせることで、特定要素配下の最初の子要素を簡単に取得できます。
状況に応じて、最適な方法を選択しましょう。

参考文献

Q&A

質問	回答
find()メソッドとchildren()メソッドの違いは何ですか？	find()メソッドは、すべての子孫要素を探しますが、children()メソッドは、直接の子要素のみを探します。
:first擬似セレクタは、find()メソッドと組み合わせて使う必要はありますか？	:first擬似セレクタは、単独で使うことも、find()メソッドと組み合わせて使うこともできます。
最初の要素以外の特定の順番の要素を取得するにはどうすれば良いですか？	eq()メソッドを使って、特定のインデックスの要素を取得できます。例えば、2番目の要素を取得するには、eq(1)と指定します。

その他の参考記事:jquery find 複数