コラム
【初心者向け】jQueryのfindメソッドを基礎から解説
覚えるとHTMLやCSSではできない、さまざまなことができるようになります。
今回は、 jQueryのメソッドで使う機会が多い「find」メソッドについて、
基本的な使い方などを解説していきます。
目次
jQueryとは？
まずは、そもそも「jQuery」とは何かについて解説していきます。
jQueryとはJavaScriptのライブラリで、JavaScriptでできることを簡単な記法で実現できように設計されています。ブラウザごとの記述差異の吸収・HTMLの操作・イベント処理・CSSアニメーションなどを、より簡便に記述できるように設計されたのが「jQuery」です。
無料で利用できるオープンソースのライブラリであり多数のブラウザで機能するので、汎用性・拡張性が高く、世界のWebサイトの７割以上で使われていて、JavaScriptを使用しているサイトでは、ほぼjQueryが利用されています。
jQueryのfindメソッドとは？
findメソッドは、HTML内にある要素を探し出すためのメソッドです。起点となる要素と探し出す要素を決めたら、起点となる要素から下階層に辿っていき、すべての子孫要素から条件に合致する要素を取得します。
探し出す記述方法もいろいろあるので、ひとつずつ詳しく解説していきます。
findメソッドの基本の使い方4つ
findメソッドの基本的な使い方について解説していきます。findメソッドはさまざまな使い方があるので、その使い方に合わせてあげることが大切です。
DOM要素を取得する
jQueryはHTMLのDOM要素を簡単に扱うことができます。DOM要素とは、「Document Object Model」の略で、プログラムからHTMLやXMLを自由に操作するための仕組みです。
findメソッドでDOM要素を取得するには「$(“検索対象となる「親要素」”).find(“その親要素の中から取得したい「子孫要素」”); 」となるように記述する必要があります。
では、実際にDOM要素を取得する際の記述をしてみます。
HTML
<div>
<p>子孫要素</p>
</div>
jQuery
$(“div”).find(“p”);
この記述だけで、div要素の中のpタグを取得することができます。
セレクタで指定した条件に一致したオブジェクトの取得
次にセレクタで条件を指定し、一致したオブジェクトを取得する方法についてです。
findメソッドは「検索対象.find(“セレクタ”);」というかたちでも使うことができます。セレクタとは、CSSのセレクタのことでID名やクラス名を指定することで、そのセレクタを取得することが可能となります。
では、実際にセレクタで条件を設定して取得した場合の記述をしていきます。
HTML
<div class=”oyayouso”>
<p class=”koyouso”>子孫要素</p>
</div>
jQuery
$(“.oyayouso”).find(“.koyouso”);
ここではクラス名のセレクトを条件設定し、検索・取得しています。記述は、先ほどのDOM要素と変わらず、簡単な記述で取得が可能です。
複数のセレクタを指定して取得
セレクタ指定をベースに、findメソッドに複数の条件を指定して方法を解説します。
では、実際にセレクタで複数条件を設定して取得した場合の記述をしていきます。
HTML
<div>
<p class=”text top”>テキスト1</p>
<p class=”text”>テキスト2</p>
<p class=”text”>テキスト3</p>
</div>
jQuery
$(function () {
$(‘div’).find(‘.text + .top’)
});
このように「+」を間に入れることで、「class属性がtextかつtop」の要素のみに指定できます。
jQueryオブジェクトを作成して条件に指定
findメソッドは、DOM要素そのものだけでなく、jQueryのオブジェクトも指定することができます。
検索範囲内にオブジェクトを作成してあれば、子孫要素から該当するjQueryオブジェクトを指定することができるのです。
では、jQueryオブジェクトの取得方法について実際に記述していきます。
HTML
<div class=”oyayouso”>
<p class=”koyouso”>子孫要素</p>
</div>
jQuery
$(function () {
var find_js = $(‘.koyouso’)
$(‘.oyayouso’).find(“$find_js”);
});
子要素を取得する3つの方法
では、実際に子要素を取得して、先述した取得方法にいろいろな処理を加えてみましょう。
findメソッドで子要素を取得する
先ほど解説したfindメソッドで取得して、取得した文字色を赤色に変更します。
HTML
HTMLはdivタグで囲ったpタグが3つそれぞれあります。今回は、このpタグすべての文字色を赤色に変更します。
<div>
<p>子要素1</p>
<p>子要素2</p>
<p>子要素3</p>
</div>
jQuery
jQueryについて、解説していきます。
まず、実行するためにfunctionを記載し、処理内容を記述していきます。検索対象となる「親要素」はdivタグで、divタグの中にあるpタグを検索・取得します。cssメソッドは対象要素にCSSを追加や変更ができるメソッドです。
今回は、colorプロパティをred(赤色)に変更しました。cssメソッドも活用する機会が多いので覚えておくと良いでしょう。
$(function () {
$(‘div’).find(‘p’).css(‘color’,’red’);
});
複数の属性で子要素を取得する
HTMLは、それぞれの要素の種類ならではの属性(attribute)を持っています。jQueryは、もちろんその属性を扱うことが可能で、findメソッドの場合、セレクタに属性を指定することもできます。
属性の記述方法は、[属性名]あるいは[属性名=“属性値”]です。複数の属性を指定したいときは、[]（カギカッコ）を連続して記述します。
例えば、liタグでid属性を持ち、かつname属性が「value」で終わる条件を指定したい時は、「検索対象.find(li[id][name=“value”])」のように記述します。
実際に記述してみましょう。
HTML
今回はulタグの中にliタグを3つ配置しました。それぞれにid属性を「value」で付与し、name属性はそれぞれ個別のnameにしています。
<ul>
<li id=”value” name=”value_1″>値1</li>
<li id=”value” name=”value_2″>値2</li>
<li id=”value” name=”value_3″>値3</li>
</ul>
jQuery
記述方法については、先述したものと大きくは変わりません。ulタグの中のliタグかつclass属性が付与されており、name属性は「value_1」のliタグのみ文字色が赤色になるようにしています。
$(function () {
$(‘ul’).find(‘li[class][name=”value_1″]’).css(‘color’,’red’);
});
id属性、class属性で子要素を取得する
では、id属性やclass属性で取得した場合の記述方法について解説していきます。基本的には今までのdivタグやulタグなどの指定がid属性やclass属性に変わっただけです。
HTML
親要素はid属性を「oyayouso」、子要素はclass属性を「koyouso」でそれぞれ指定しました。
<div id=”oyayouso”>
<p class=”koyouso”>子要素</p>
</div>
jQuery
id属性は「#」、class属性は「.」を先頭につけてあげることで指定が可能です。CSSのid属性、class属性の記述と同じなのでわかりやすいです。
以下、記述の解説は、id属性の「oyayouso」内のclass属性が「koyouso」を検索して、文字色を「赤色」に変更しています。
$(function () {
$(‘#oyayouso’).find(‘.koyouso’).css(‘color’,’red’);
});
findメソッドとeachメソッドをあわせて使う場合
findメソッドは、処理を繰り返し実行する「eachメソッド」と併用されることも多いです。ここでは、findメソッドとeachメソッドを合わせて使った方法を解説していきます。
リスト内の要素を順番に取得してみます。同時に併用する際は、findメソッドの後ろにeachメソッドをつなげていきます。今回は、eachメソッドの引数には、index番号とその要素を指定しています。
では実際に記述してみましょう。
HTML
<ul id=”oyayouso”>
<li class=”koyouso”>子要素1</li>
<li class=”koyouso”>子要素2</li>
<li class=”koyouso”>子要素3</li>
<li class=”koyouso”>子要素4</li>
</ul>
jQuery
$(function (){$(‘#oyayouso’).find(‘.koyouso’).each(function (index, element) {
console.log(index);
console.log($(element).text());
});
});
コンソールに出力されているとおり、eachメソッド内で順番に要素を取得できていることが分かります。
findメソッドと他のメソッドをあわせた属性値を検索するには
jQueryのfindメソッドは便利が故に、汎用性が高いので乱用しがちになります。検索対象に含まれるすべての子孫要素を検索するメソッドのため、要素が多ければ多いほど、マシンに多くの負荷を掛けてフリーズする恐れがあります。
そのため、何がしたいかしっかりと目的に合わせて、適宜、他のメソッドを利用することも必要です。
では、eachメソッドの他にfindメソッドは、どのようなメソッドと組み合わせて使用することができるのか解説していきます。
firstメソッドで最初の子要素のみを検索する場合
firstメソッドとは、一致した対象要素の直下の子要素のうちの最初の要素のみを取得するjQueryのメソッドです。
例えば、リスト内の最初の項目やテーブルの内の最初の行を取得するのに向いています。
では、実際に記述してみます。
HTML
<ul>
<li>子要素1</li>
<li>子要素2</li>
<li>子要素3</li>
<li>子要素4</li>
</ul>
jQuery
$(function () {
$(‘ul’).find(‘li’).first().css(‘color’, ‘red’);
});
この記述でliタグは4つありますが、最初のliタグのみ文字色が赤色になります。
attrメソッドで任意の子要素を検索して属性値を変更する場合
attrメソッドは応用性に富むjQueryのメソッドです。その名の通り、attributeつまり属性を扱うメソッドであり、HTML要素の属性を簡単に取得・設定・変更することができます。
HTML
<ul>
<li id=”value” name=”value_1″>値1</li>
<li id=”value” name=”value_2″>値2</li>
<li id=”value” name=”value_3″>値3</li>
</ul>
jQuery
$(function () {
$(‘ul’).find(‘li[name=”value_1″]’).attr(‘name’, ‘value_4’);
});
上記を記述することでliタグでname属性で「value_1」を検索し、attrメソッドで「value_1」から「value_4」へ書き換えることが可能となります。
このように、attrは属性を変更することが可能で、name属性以外にもid属性やclass属性などの変更も可能です。
「findメソッド」と「childrenメソッド」の違いとは？
childrenメソッドは、対象要素の直下の子要素のみを対象とするjQueryのメソッドです。
先述したように、findメソッドはすべての子孫要素を検索してしまうのに対して、childrenメソッドは直下の子要素のみで孫以下の要素は検索しないため、findメソッドと比較して負荷が少ないメソッドとなります。
子要素のみの使用と分かっている場合は、childrenメソッドを使用することをおすすめします。
まとめ
今回は「find」メソッドについて解説しました。
findメソッドは実務でも使う機会が多くあるので、しっかりと覚えていきましょう。また、findメソッド以外にもjQueryのメソッドは役立つメソッドばかりなので少しでも多く覚えていきましょう。
WEBでのお問い合わせはこちら
