2

クリックされた要素に依存する親 H2 を選択したい 例:

<ul><h2>Title1</h2>
    <li>Test</li>
    <li>sub menu
        <ul>
            <li><a href="#">link1</a></li>
        </ul>
    </li>
</ul>
<br/>


<ul><h2>Title2</h2>
    <li>Test</li>
    <li>ubmenu
        <ul>
            <li><a href="#">link2</a></li>
            <li>sub sub menu
                <ul>
                    <li><a href="#">link2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

異なる場所にある 3 つのリンクがあります。私のJS関数：

jQuery("a").bind('click', function () {    
       jQuery(this).parents("h2").html("okay!")

})

したがって、親 H2 のコンテンツを変更したい場合は、link1 をクリックして title1 を変更し、両方の link2 で title2 を変更する必要があります。

私のテスト: http://jsfiddle.net/Kaherdin/awX9n/1/

4

6 に答える 6

5

これを試して：

jQuery("a").bind('click', function () {    
   jQuery(this).closest("ul:has(h2)").find("h2").html("okay!")
})

フィドルの例

classまたはidをトップレベルに置くと、そのセレクターをよりシンプルかつ高速にすることができることに注意してくださいul。

アップデート

親のクラスを使用して簡単にする方法は次のulとおりです。

<ul class="list-parent">
    <h2>Title1</h2>
    <li>Test</li>
    <li>sub menu
        <ul>
            <li><a href="#">link1</a></li>
        </ul>
    </li>
</ul>

jQuery("a").bind('click', function () {    
   jQuery(this).closest(".list-parent").find("h2").html("okay!")
})
于 2012-12-13T10:16:55.547 に答える
4

h2はタグの親ではないaため、 までトラバースしてからul、h2

jQuery("a").on('click', function () {   
    jQuery(this).parents("ul").find("h2").html("okay!")
});

デモ: http://jsfiddle.net/awX9n/4/

于 2012-12-13T10:22:11.197 に答える
2

OKなのでa、の気配はありませんh2。しかし、これを行うことができます：

e.preventDefault();
$(this).closest('ul:has(h2)').find('h2').html('okay!');

これが実際の例です

これは最初にul親 (必要な を含む最も近い親要素h2) を見つけ、次に要素を見つけますh2。

h2親の内部にさらに多くの要素を含めるように構造が変更された場合、機能しないことに注意することが重要ulです。しかし、私はあなたがそのようなことを知っていると確信しています

于 2012-12-13T10:17:27.187 に答える
1

h2要素がクリックされた要素の親ではない場合、最上位のul要素にクラスを追加してclosestメソッドを使用できます。

<ul class='parent'><h2>Title1</h2>


jQuery(this).closest("ul.parent").children("h2").html("okay!");

現在のマークアップで要素を選択するために jQuery セレクターを使用できますが、クラスを使用すると、コードがよりクリーンで効率的になります。

于 2012-12-13T10:19:41.617 に答える
0 
jQuery(this).parent().parent().parent().parent().find("h2").html("okay!");

それをするでしょう。

于 2012-12-13T10:16:58.100 に答える
0

find()次のように、オプションを使用してコードを試してください

jQuery("a").bind('click', function () {    
     jQuery(this).parents("ul").find("h2").html("okay!")
})
于 2012-12-13T10:25:22.730 に答える