Выбор братьев и сестер при наведении

Question

У меня есть код, который выглядит так на HTML:

<div class="blog_highlight">

<ul class="calendar">
<li><a href="#">Nov</a></li>
<li><a href="#">25</a></li>
</ul>


<ul class="commentaries">
<li><a href="#">16</a></li>
</ul>


<div class="entry_info">

<div>
<a href="#"><img src="images/blog_pix_1.jpg" width="230" height="210" alt="" /></a>
</div>
<h2>Title</h2>

<p>Text</p>

<p><a href="#" class="read_more">Leer mas</a></p>

</div><!-- end entry info -->

</div><!-- end blog highlight -->

Я хотел бы добиться этого при наведении курсора на UL (с календарем классов и комментариями), цвет границы для div.entry_info и фон a.read_more изменяются с помощью jQuery. Это то, что у меня есть, но второй не работает.

<script>
$(document).ready(function(){


$('ul.calendar').hover (
function () {

$(this).nextAll('.entry_info').addClass('hover_border');
$(this).nextAll('a.read_more').addClass('more_jquery');
$(this).next('ul.commentaries').addClass('bubble_hover');

},

function () {

$(this).nextAll('div.entry_info').removeClass('hover_border');
$(this).nextAll('a.read_more').removeClass('read_more_jquery');
$(this).next('ul.commentaries').removeClass('bubble_hover');


});



});

</script>

Моя текущая проблема заключается в том, что все, кроме второй строки, работает.

Это строка с вопросом:

$(this).nextAll('a.read_more').addClass('more_jquery');

Я довольно новичок в jQuery и попробовал братьев и сестер, а затем и все, но это не сработает. Я пытался с eq (0), который работал, но как мне это сделать? Причина, по которой я хожу с классами, а не с ID, заключается в том, что этот блок повторяется несколько раз.

Спасибо за помощь.

Answer 1

Почему бы просто не использовать CSS?

ul.calendar:hover ~ .entry_info {
    // selects all .entry_info's which are on the same level (siblings) as the ul.calender  which is hovered over
}

Кстати, я уверен, что волшебная $ -функция jQuery также поддерживает общий братский комбинатор, поэтому $("item ~ sibling") должно работать просто отлично:

$("...").hover(function() {
    $("... ~ siblings");
}

См .:

• http://www.w3.org/TR/selectors/#sibling-combinators (селекторы CSS 3)
• http://api.jquery.com/category/selectors/ (селекторы CSS 1 - 3 поддерживаются)

Answer 2

Не работает, потому что nextAll получает всех братьев и сестер на основе селектора. Ваша гиперссылка не родная. Вместо этого вы можете использовать find для поиска в entry_info ссылки.

http://jsfiddle.net/U7hNS/

<ul class="calendar">
    <li><a href="#">Nov</a></li>
    <li><a href="#">25</a></li>
</ul>
<div class="entry_info">
   <p><a href="#" class="read_more">Leer mas</a></p> <!-- NOT A SIBLING! -->
</div>

$('ul.calendar').hover (
    function () {    
        $(this).nextAll('.entry_info').addClass('hover_border');
        $(this).nextAll('.entry_info').find('a.read_more').addClass('more_jquery');
        $(this).next('ul.commentaries').addClass('bubble_hover');        
    },

    function () {    
        $(this).nextAll('div.entry_info').removeClass('hover_border');
        $(this).nextAll('.entry_info').find('a.read_more').removeClass('more_jquery');
        $(this).next('ul.commentaries').removeClass('bubble_hover');
});