jQueryのfind()で子孫要素を取得する方法

ここでは、jQueryのfind()メソッドを用いて指定した要素の子孫要素を取得する方法について説明していきます。

find()メソッドとは

find()メソッドは、指定した要素の子孫要素を取得するメソッドです。

find()メソッドの書き方

$(要素).find(子孫要素);

find()メソッドの返り値

取得した子孫要素

find()メソッドの使用例

HTML

<div>
  <ul>
    <li id="list1"><span>リスト１</span></li>
    <li id="list2">リスト２</li>
    <li id="list3">リスト３</li>
    <li id="list4"><span>リスト４</span></li>
    <li id="list5">リスト５</li>
  </ul>
</div>

jQuery

$(function(){
  $("div").find("#list3").css("color", "red");
  $("div").find("span").css("background-color", "yellow");
  console.log($("div").find("li"));
});

ここでは、id名が「list3」の要素の色を赤色にして、<span>要素の背景色を黄色にするという内容になっています。

結果

まとめ

このように、jQueryのfind()メソッドを用いることで、指定した要素の子孫要素を取得することができます。