JQuery селектор: как я могу выбрать и добавить класс к предыдущему и следующему тегу

Question

Как я могу выбрать и добавить класс к предыдущему и следующему тегу.

<div class="sub">
 <ul>  
   <li><a href="#">a</a>
    <ul>
     <li><a href="#">b</a>
      <ul>
     <li><a href="#">c</a></li>
     <li><a href="#">d</a></li>
     <li><a href="#">e</a></li>
    </ul>
    </li>
     <li><a href="#">f</a></li>
     <li><a href="#">g</a></li>
   </ul>
    </li>
   <li><a href="#">h</a></li>
   <li><a href="#">i</a></li>
   <li><a href="#">j</a></li>
   </ul>
</div>

Пример: Теперь я хочу добавить 2 класса CSS (.prev & .next) к соответствующим элементам и предположить, что мышь находится над элементом <li><a href="#">g</a></li>, поэтому я хочу добавить 2 класса к <li><a href="#">f</a></li> и <li><a href="#">h</a></li>

чик:

$(document).ready(function() {
    $('li').css({'border-top': '1px solid green','border-bottom': '1px solid green'});

    $('li a').each(
        function(intIndex){     
            $(this).mouseover(function(){
                $(this).css({'border-top': '1px solid red','border-bottom': '1px solid red'});
                    $(this).prev().find('li').css({'border-bottom': 'none'});
                    $(this).next().find('li').css({'border-top': 'none'});
                }).mouseout(function(){
                    $(this).css({'border-top': '1px solid green','border-bottom': '1px solid green'});
            });
        }    
    );
});

Answer 1

Попробуйте это: http://jsfiddle.net/rsEaF/1/

var $a = $('.sub li > a');

$a.mouseenter(function() {
    var index = $a.index(this);
    var prev = (index - 1 >= 0) ? $a.eq(index - 1).addClass('prev') : $();
    var next = $a.eq(index + 1).addClass('next');
    $a.not(prev).not(next).removeClass('prev next');
});​

РЕДАКТИРОВАТЬ: Одна небольшая коррекция. Ранее, если вы наведете курсор на первый элемент, класс .prev будет добавлен к элементу last в списке. Это было исправлено.

---

РЕДАКТИРОВАТЬ: Вот версия, которая использует .each() для назначения обработчика. Делать это таким образом немного эффективнее, потому что отпадает необходимость вызывать $a.index(this); для каждого mouseenter.

Попробуйте: http://jsfiddle.net/rsEaF/3/

var $a = $('.sub li > a');

$a.each(function(index) {
    $(this).mouseenter(function() {
        var prev = (index - 1 >= 0) ? $a.eq(index - 1).addClass('prev') : $();
        var next = $a.eq(index + 1).addClass('next');
        $a.not(prev).not(next).removeClass('prev next');
    });
});​

---

РЕДАКТИРОВАТЬ: Если у вас возникли проблемы с последовательным удалением соответствующего класса, избавьтесь от этой строки кода:

$a.not(prev).not(next).removeClass('prev next');

и в начале обработчика замените его на:

$a.removeClass('prev next');

или

$a.filter('.prev,.next').removeClass('prev next');

Answer 2

Вы должны приложить усилия, чтобы не подключать прослушиватели событий, подобные этому

$('li a').each(function (el) {
    $(el).mouseover(function (e) {
        /* event handler code */
    });
});

Достаточно (и более эффективно) прикрепить слушателя так:

$('li a').mouseover(function (e) {
    /* event handler code */
});

Также jQuery 1.3 представляет .live() (см. http://api.jquery.com/live/)

$('li a').live('mouseover', function (e) {
    /* event handler code */
});

Любое событие, выбрасываемое элементом, соответствующим селектору, независимо от того, существует ли оно при вызове .live() или создается позже, будет передано указанной функции.

Answer 3

Это должно работать.Он проходит через весь .sub div, поэтому он может быть неэффективным, если этот список может быть очень длинным.

$(function() {
  $('.sub li>a').hover(
    function() {
      var curr = this;
      var last = '';
      var found = false;
      $('.sub li>a').each(function() {
        if(found)
        {
          $(this).addClass('next');
          return false;
        }
        if(this == curr)
        {
          found = true;
          $(last).addClass('prev');
          $(this).addClass('curr'); //you may want to do this too?
        }
        else
        {
          last = this;
        }
      });
    },
    function() {
      $('.sub li>a.next').removeClass('next');
      $('.sub li>a.prev').removeClass('prev');
    }
  );
});