javascript - prev 或兄弟姐妹选择 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

那是因为您正在使用which 将为该集合中的每个元素ul.children执行代码。试试这个：

$('.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

您应该使用closestorparent方法：

$('.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/

您应该更好地使用addClass和removeClass方法，而不是因为您已经在 CSS 中css定义了类。.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/