「jQuery」findメソッドで指定子要素を検索して操作する

2022年5月13日

環境
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の複数値を適用します。

jQuery

Posted by arkgame

関連投稿: