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

2022年7月12日

環境

Google Chrome　103.0.5060.114
Windows 10 Home 64bit
jQuery 3.6.0

構文
$(要素).find(“.子要素クラス .孫要素クラス").css(属性,値);
findメソッドで子要素の下にある孫要素を指定してCSS属性の値を追加します。

使用例

<!DOCTYPE html>
<html>
<body>

<div class = "cft">
      <p >tokyo</p>
      <p class="tA">oosaka
    <span class="st">info01</span
    </p>
      <p class="tA">fukuoka
            <span class="st">info02</span></p>
</div>
<input type="button" id="btnSet" value="設定">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
      $("#btnSet").click(function() {
       //孫要素を検索して操作
            $(".cft").find(".tA .st").css("color","blue");
      });
</script>

</body>
</html>

結果
div要素「cft」を起点にして、findメソッドで子要素の「tA」のさらに下にある孫要素の「st」を指定して文字の色を青にします。

jQuery

Posted by arkgame

関連記事: