Q&A
jQueryで深いところにある、対象を指定したいのですが記載方法が間違っていますでしょうか？
findだとchildrenと違い取得できる解説があったので試してみるのですが反応してくれません。
findまたはthisの使い方が間違っていますでしょうか？
h2をクリックすることで、 <p>このメッセージを赤にしたい。</p>を赤色にしたいのですが…。
すみませんが、アドバイスお願いいたします。㎜
HTML
1 <div id="cont"> 2 <h2>見出し</h2> 3 <div class="box1"> 4 <p>box1のメッセージ</p> 5 <div class="box2"> 6 <p>box2のメッセージ</p> 7 <div class="box3"> 8 <p>このメッセージを赤にしたい。</p> 9 </div> 10 </div> 11 </div> 12 </div>
jQuery
1 <script> 2 $(function () { 3 $("h2").on("click", function () { 4 $(this).find(".box3 p").css("color", "red"); 5 }) 6 }); 7 </script>
回答1件
0
ベストアンサー
findは、指定した要素の子要素を検索できるのですが、ご質問のHTMLだと、H2の中にdivがいるわけではないので、findしても何も見つかりません。
<h2>から見ると見つけたい要素は、一つ親の <div id="cont"> の中にある .box3 p を探す。のような指定が必要です。
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 7 <title>Document</title> 8</head> 9<body> 10 <div id="cont"> 11 <h2>見出し</h2> 12 <div class="box1"> 13 <p>box1のメッセージ</p> 14 <div class="box2"> 15 <p>box2のメッセージ</p> 16 <div class="box3"> 17 <p>このメッセージを赤にしたい。</p> 18 </div> 19 </div> 20 </div> 21 </div> 22 <script> 23 $(function () { 24 $("h2").on("click", function () { 25 $(this).parent().find(".box3 p").css('color', 'red') 26 }) 27 }); 28 </script> 29</body> 30</html>
投稿2020/09/06 08:37
総合スコア2027
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/06 11:04