如何选择一个类并将其添加到上一个和下一个标签。
<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()
分配处理程序的版本。这样做的效率会更高一些,因为它不需要为每个 mouseenter
调用 $a.index(this);
。
尝试一下: 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');
关于jQuery 选择器 : How can I select and add a class to the prev and next a tag,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3407209/