お役立ち情報

jQueryのfindメソッドで子要素を取得してみよう

jQueryのイメージ

jQueryのfindメソッドは、子要素を取得するためのメソッドです。子要素とは、HTMLの階層の下にある要素のことです。findメソッドを使用することで、特定のタグの下の方にある子要素を検索して取得することができるのです。

検索して取得できるということは、そもそもその要素が存在するかどうかも確認することができます。簡易的なプログラムなら良いのですが、記述が多くなるとすべてのタグや要素を目視で確認するのは大変なこともあります。

そんなとき、findメソッドで要素の確認ができると便利ですね。たとえばCSSで特定の要素に対して処理を記述したら、思いがけず同じタグを使っていた要素にも処理を加えてしまった、なんてこともあるでしょう。

findメソッドを使用することで要素を確認して整理できるので、一つの便利な使い方です。このページでは、その他諸々も含めてfindメソッドの使い方を解説していきます。

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

まずはfindメソッドの基本的な使い方をソースコードを見ながら解説していきます。

<body>
<div id="findSample1">
     <p>テキスト</p>
     <div>
          <a href="#">リンク</a>
     </div>
</div>

<script>
var getFind = $('# findSample1').find('a');
console.log(getFind [0] );
</script>
</body>

上記のコードを実行すると、コンソールには以下のように表示されます。

<a href=”#”>リンク</a>

idがfindSample1のなかから、findメソッドを使用してaタグの要素を取得しました。それをそのままコンソールで出力すると、上記のようにaタグとそのなかの要素のリンクという文字列がセットで出力されました。

また同様に、階層が深くてもfindメソッドで要素を取得することが可能です。

<body>
<div id="findSample2 ">
     <p>テキスト</p>
     <div>
          <a class="link" href="#">リンク</a>
          <div>
               <p id="text">文字列</p>
          </div>
     </div>
</div>

<script>
var getFind1 = $('# findSample2').find('.link');
var getFind2 = $('# findSample2').find('#text');
console.log(getFind1 [0] );
console.log(getFind2 [0] );
</script>
</body>

上記のコードを実行すると、以下のようにコンソールに出力されます。

<a class=”link” href=”#”>リンク</a>
<p id=”text”>文字列</p>

ソースコードのなかにはfindメソッドが二つあり、それぞれfindSample2のなかのclass属性がlinkのものと、id属性がtextのものを指定しています。ちなみに、「.」「#」の使い方はCSSと同じです。

クラスを指定する際は「.」、idを指定する際は「#」となっています。

findメソッドの応用的な使い方

findメソッドの基本的な使い方は上記の通りですが、より応用的な使い方もあります。たとえば、以下のような用法が便利です。

findメソッドのなかで複数の属性を指定する

この使い方は応用と言っても特に難しくはないのですが、単一属性をしていた上の使用方法に比べると一応は応用的な使い方と言えるでしょう。具体的には、以下のサンプルコードのようになります。

<body>
<div id="findSample3 ">
     <p>テキスト</p>
     <div>
          <a class="link" href="#">リンク</a>
          <div>
               <p id="text">文字列</p>
          </div>
     </div>
</div>

<script>
var getFind = $('# findSample3').find('.link, #text');
console.log(getFind [0] );
console.log(getFind [1] );
</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

<a class=”link” href=”#”>リンク</a>
<p id=”text”>文字列</p>

findメソッドのなかに「,」区切りで指定することで、複数の属性を指定することができます。

each()で複数要素を取得する

findメソッド単体だと上で解説してきたような記述になりますが、eachメソッドと組み合わせて記述することも可能です。findメソッドについて学習されている方はすでにご存じの方が多いかと思いますが、eachメソッドは繰り返し処理を行うためのメソッドです。

つまり、findメソッドと組み合わせて使用することで、子要素の取得処理を繰り返すことが可能なのです。また、配列変数を用意しなくてもelementの記述によってメモリをキープし、そこにインデックスと要素を格納することが可能です。具体例を見ていきましょう。

<body>
<div id="findSample4 ">
     <ul>
          <li>ナンバー1</li>
          <li>ナンバー2</li>
     </ul>
</div>

<script>
$('# findSample4').find('li').each( function( index, element ) {
     console.log( element.textContent );
})
</script>
</body>

以上のソースコードを実行すると、以下のようにコンソール出力されます。

ナンバー1
バンバー2

idのfindSampleに対してfindメソッドでタグを指定している点は今までと同じですが、その後ろにさらにeachメソッドがくっついています。eachメソッドのなかのindexがインデックス番号(要素番号)で、elementが要素になっています。

indexとelementのセットでメモリ領域にデータを格納しているため、配列変数がなくてもelement.textContentと記述すれば中身を取得できます。この場合、インデックス順に要素を取得してコンソール出力しています。

lengthで戻り値を取得

最後にfindメソッドでlengthを使って戻り値を取得する方法を紹介します。lengthは基本的に他のプログラミング言語でも要素の長さ等を戻り値として返すものです。しかし、jQueryでは機能拡張して、要素があるかどうかの判定にも使えます。

今回紹介するのは要素があるかどうかの判定になります。要素があった場合は要素の数を返し、なかった場合は要素数である0を返します。具体例は以下です。

<div id="findSample5 ">
     <p>テキスト</p>
     <div>
          <a class="link" href="#">リンク</a>
     </div>
</div>

var getFind = $('# findSample5').find('.link ');
console.log(getFind.length );

上記のソースコードを実行すると、以下のようにコンソール出力されます。

1

linkクラスに該当する要素が1つだったため、1を返しました。以上がjQueryのfindメソッドの基本的な使用方法と、少し応用的な使用方法になります。この他にもいろいろなメソッドと組み合わせたり、条件分岐と組み合わせる方法もあります。

とりあえずは基本的な部分を押さえ、余裕が出てきた、またはfindメソッドを使用して高度な実装を行う必要がある、といった場合には調べて実装していってください。いきなりすべての使用方法を網羅しなくても、必要に応じて調べて実装していけば良いかと思います。

キャリアカウンセリングのプロとして
あなたに合った案件をご案内します。

まずはお気軽にお問い合わせください!

イメージ