jQueryで子要素の取得ができるfindメソッドの使い方

.NET開発者のためのブログメディア

「divタグで囲まれた中のpタグ部分だけ色変更」など、指定要素だけを変更したいと思うことはないでしょうか。そんな場合に便利なのが、jQueryの「findメソッド」です。この記事では、findメソッドの概要やfindメソッドの使い方を紹介します。ぜひ、参考にしてみてください。

SE: 子要素といえば「childrenメソッド」が思い浮かびますが、何が違うんでしょうか？

PL: childrenメソッドは一階層下の子要素だけ取得しますが、findメソッドは子要素だけに限らずすべての子孫要素から指定の要素を取得することができます。

findメソッドとは

findメソッドとは、選択した要素のすべての子孫要素をたどって、指定の条件に当てはまる要素を見つけるためのjQueryメソッドです。
findメソッドは次のように記述します。

$("セレクタ").find("取得したい子孫要素");

1	$("セレクタ").find("取得したい子孫要素");

findメソッドで子要素を取得する

例えば、以下のような構成のHTMLコードがあるとします。

   <div>
     <p>くだものリスト</p>
     <ul>
       <li>りんご</li>
       <li>みかん</li>
       <li>ばなな</li>
     </ul>
   </div>

<div>

<p>くだものリスト</p>

<ul>

</ul>

</div>

もし、divタグ内のpタグで囲まれている文字を指定したい場合、findメソッドを用いて次のように記述します。

$("div").find("p");

1	$("div").find("p");

これで指定することができました。
それでは、findメソッドの後ろにcssメソッドをつなげて記述し、pタグで囲まれている文字を赤色に変更してみましょう。

$(function(){
  // findメソッドで<div>内の<p>要素を指定し赤色に変更
  $("div").find("p").css("color", "red");
});

$(function(){

// findメソッドで<div>内の<p>要素を指定し赤色に変更

$("div").find("p").css("color", "red");

});

全体のコードは以下のようになります。

<!DOCTYPE html>
<html lang=ja>
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="stylesheet.css">
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
 <div>
   <p>くだものリスト</p>
   <ul>
     <li>りんご</li>
     <li>みかん</li>
     <li>ばなな</li>
   </ul>
  </div>
 <script>

 </script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<div>

<p>くだものリスト</p>

<ul>

</ul>

</div>

</script>

</body>

</html>

実行結果
指定の文字色を変更

pタグで囲まれている「くだものリスト」という文字だけが赤色に変更されましたね。
このように、同じdivタグで囲まれている要素が複数あっても、findメソッドで指定の子孫要素を取得することができるのです。

eachメソッドとの併用

findメソッドは、処理を繰り返し実行する「eachメソッド」と併用されることも多いです。
では、さっそくfindメソッドとeachメソッドとの併用方法を見ていきましょう。

先ほどと同じHTMLコードを使用します。

   <div>
     <p>くだものリスト</p>
     <ul>
       <li>りんご</li>
       <li>みかん</li>
       <li>ばなな</li>
     </ul>
   </div>

<div>

<p>くだものリスト</p>

<ul>

</ul>

</div>

では、リスト内の要素を順番に取得してみましょう。
同時に併用する際は、findメソッドの後ろにメソッドチェーンでeachメソッドをつなげていきます。eachメソッドの引数には、index番号とその要素を指定しています。

   $(function(){
     $("div").find("li").each(function(index, element) {
       console.log(index);
       console.log($(element).text());
     })
   });

$(function(){

$("div").find("li").each(function(index, element) {

console.log(index);

console.log($(element).text());

})

});

実行結果
要素の取得結果

コンソールに出力されているとおり、eachメソッド内で順番に要素を取得できていることが分かります。

SE: eachメソッド内で分岐をすれば、より個別の処理にも対応できそうですね。

PL: そうですね！eachメソッドとの併用で、より活用の場が広がりますよ。

findメソッドを活用して効率よく処理を書こう

今回は、findメソッドの使い方やeachメソッドとの併用方法をお伝えしていきました。findメソッドは、指定要素の子孫要素を一気に取得できる効率の良いメソッドです。eachメソッドと併用すれば、個別の設定にも対応することができます。ぜひfindメソッドを活用して、効率よく処理を書いてみてください。

>>>JavaScriptの案件を探すならFEnet .NET Navi