「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」を指定して
背景色を緑にします。