jQueryで深い対象が指定できません。

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件

ベストアンサー

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

YakumoSaki

総合スコア2027

yukina00235

2020/09/06 11:04

有難うございます。mm >>findは、指定した要素の子要素を検索できるのですが、なるほどです、対象内を一気に調べてくれるものと思っておりました。そのため、1つ上の親要素を.parentで指定して、そこから目線での指定になるのですね。考え方というか関係性の概念が少し深まりました。有難うございます。㎜

行動規範の内容に同意します