jQuery选择器

您好,我如何选择并添加一个类到prev和下一个标签.

<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'});
            });
        }    
    );
});

提前致谢

解决方法

试试这个： 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类将添加到列表中的最后一个项目.这已得到纠正.

编辑：这是一个使用.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');