javascript - 前または兄弟は jQuery を選択します

Question

<li class="page_item "><a href="javascript:">A</a>
<ul class="children">
    <li class="page_item"><a href="javascript:">1</a></li>
    <li class="page_item"><a href="javascript:">2</a></li>
</ul>
</li>
<li class="page_item "><a href="javascript:">B</a>
<ul class="children">
    <li class="page_item"><a href="javascript:">1</a></li>
    <li class="page_item"><a href="javascript:">2</a></li>
    <li class="page_item"><a href="javascript:">3</a></li>
    <li class="page_item"><a href="javascript:">4</a></li>
</ul>
</li>

$('.children a').click(function(event){ 
    event.stopPropagation();
        $('ul.children').prev().css('background','red');  
});

オンラインサンプル: http://jsfiddle.net/uybPf/

AまたはBのサブメニューをクリックすると、AまたはBが強調表示されます。しかし、私のコードはそれらすべてを強調表示しました。toggleClass() 誰かが私のコードを修正するのを手伝ってくれるかもしれません。ありがとう

Answer 1

これは、そのセット内のすべての要素ul.childrenに対してコードを実行する which を使用しているためです。代わりにこれを試してください：

$('.children a').click(function(event){ 
    event.stopPropagation();
    $("ul.children").prev().css('background','none');
    $(this).closest("ul.children").prev().css('background','red');  
});

デモ: http://jsfiddle.net/uybPf/6/

Answer 2

$('.children a').click(function(event) {
    event.stopPropagation();
    $(this).closest('ul.children').prev().css('background', 'red');
});

http://jsfiddle.net/uybPf/2/

Answer 3

closestまたはparentメソッドを使用する必要があります。

$('.children a').click(function (event) {
    event.stopPropagation();
    $('.page_item a').removeClass('highlight'); // remove previously active class
    $(this).closest('.children').prev().addClass('highlight');
});

http://jsfiddle.net/uybPf/3/

CSS で既にクラスを定義しているため、代わりにaddClassandメソッドを使用することをお勧めします。removeClasscss.highlight

Answer 4

これを試して

$('.children a').click(function(event){ 
    event.stopPropagation();
    $('>a:first', $(this).closest('.children').closest('.page_item')).css('background', '#f00')
});

ただし、これは以前に強調表示された親の強調表示を解除しません

質問のコメントを読んだ後、編集します。

追加

$('.page_item > a').css('background','transparent');

後

event.stopPropagation();

Answer 5

これを試して

$('.children a').click(function (event) {
    event.stopPropagation();
    $(this).closest('ul.children').parent().children('a').css('background', 'red');
});

http://jsfiddle.net/uybPf/2/