jQueryのfindメソッドで子要素を取得してみよう
18/11/11 16:27:24 19/05/05 15:12:26
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>ナンバー１</li>
<li>ナンバー２</li>
</ul>
</div>
<script>
$('# findSample4').find('li').each( function( index, element ) {
console.log( element.textContent );
})
</script>
</body>
以上のソースコードを実行すると、以下のようにコンソール出力されます。
ナンバー１
バンバー２
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メソッドを使用して高度な実装を行う必要がある、といった場合には調べて実装していってください。いきなりすべての使用方法を網羅しなくても、必要に応じて調べて実装していけば良いかと思います。
案件量が豊富なアルマサーチ
最後に、アルマサーチのご紹介！
アルマサーチはフリーランス向けに案件をご紹介することに特化したエージェントサービスです。豊富な案件量から、安定して継続的な案件のご紹介を実現しており、口コミから登録エンジニアが急増中です。
アルマサーチが選ばれる理由
- 豊富な案件量。週3?4日の案件や在宅リモート案件も。
- 優秀なコンサルタント陣。
- 案件に参画後もしっかりサポート。
豊富な案件量
フリーランス向けに特化し、業界屈指の案件量を誇ります！週3?4日の案件や、在宅リモート案件もありますし、その他あらゆる希望をしっかりお伝えください。最適な案件のご紹介をさせていただきます。
優秀なコンサルタント陣
技術に疎く、開発の希望を伝えても響かないエージェント・・・嫌ですよね。アルマサーチにはそのような者は一切おりません！さらに独立にまつわる税金や保険関係に詳しいスタッフが徹底的にサポートさせていただきます。
案件に参画後もしっかりサポート
常駐先が決まった瞬間に、一度も連絡が取れなくなるエージェント・・・いますよね？アルマサーチでは、そのようなことは一切ありません！常に電話やメールは即対応しますし、月に１度のランチミーティングなどから現場の状況を細かくヒアリングし、就業環境改善に尽力いたします。
人気記事
