「jQuery」findメソッドで指定子要素を検索して操作する
環境
jQuery 3.6.0
Google Chrome 101.0.4951.64
書式
1.要素.find( selector/要素 )
findメソッドは、指定の要素から子孫要素を検索します。
指定の要素を起点に子要素を検索し一致した子要素のCSSプロパティを指定します
2.CSSの値を複数設定します
var 変数名 = {“color" : “値1″,"font-size" : “値2″…}
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="cft">
<p>東京</p>
<!-- 子要素-->
<p class="os">大阪</p>
</div>
<input type="button" id="btnShow" value="検証" />
<script>
$("#btnShow").click(function () {
//CSSの値を複数設定
var css_props = {
"color" : "green",
"font-size" : "16px",
"font-weight" : "bold"
}
//findメソッドで子要素を検索して操作する
$(".cft").find(".os").css(css_props);
});
</script>
</body>
</html>
結果
「検証」ボタンを押下後、文字「大阪」がCSSの複数値を適用します。