пред или братья и сестры выбрать 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'); 
}); 

ONLINE SAMPLE: http://jsfiddle.net/uybPf/

я хотел бы достичь, когда я нажимаю подменю A или B, а затем А или B будет подсвечен. но мой код выделил их все. Я не хочу использовать toggleClass(), может кто-то может помочь исправить мой код. Благодаря

Answer 1

Это потому, что вы используете ul.children, который будет выполнять код для каждый элемент в этом наборе. Попробуйте вместо этого:

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

DEMO: 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/

Вы должны лучше использовать addClass и removeClass методы вместо css поскольку вы уже определились ed .highlight класс в CSS.

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/