「jQuery」findメソッドで孫要素を検索して操作するサンプル

環境
Windows 11 Pro 64bit
jquery 3.6.0

構文
$(セレクター名).find(“子要素名 孫要素名").css(属性,値);
jQueryのfindメソッドは、指定の要素から子孫要素を検索します。

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
 $(function () {
      $("#btnchk").click(function() {
       // 孫要素uuの背景色を変更
            $(".cft").find(".pA .uu").css("background-color","green");
      });
     });
</script>
</head>
<body>
<input type="button" id="btnchk" value="検証">
<div class = "cft">
　 <!--子要素pA -->
      <p class="pA">fukuoka
            <span class="uu">テスト</span></p>
</div>
</body>
</html>

実行結果
「検証」ボタンを押すと、findメソッドで子要素の「pA」のさらに下にある孫要素の「uu」を指定して
背景色を緑にします。

jQuery

Posted by arkgame