不确定jQuery .prev()不工作的原因
不确定jQuery .prev()不工作的原因
提问于 2012-01-14 18:52:15
我试图做的是，当我悬停在一个链接上时，使其正确的边框更改颜色以及前一个链接的边框更改颜色。
<div id="navbar">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Gigs</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social</a></li>
</ul>
</div>下面是JavaScript：
$("li a").hover(function() {
$(this).animate({
color: '#0099FF',
borderRightColor: '#0099FF'
}, 500);
$(this).prev().animate({borerRightColor: '#0099FF'}, 500);
}, function() {
$(this).animate({
color: '#FFFFFF',
borderRightColor: '#FFFFFF'
}, 500);
$(this).prev().animate({borerRightColor: '#FFFFFF'}, 500);
});任何帮助或建议都将不胜感激，谢谢！
回答 3
Stack Overflow用户
发布于 2012-01-14 18:53:37
选择器li a选择每个<a>元素。.prev()选择前一个同级元素，而不是“集合中的前一个元素”，并且<a>s没有前一个元素，因为它们没有同级，只有父级。试着这样做：
$(this).closest('li').prev().children().animate(...);此外，您还使用了borerRightColor而不是borderRightColor。
Stack Overflow用户
发布于 2012-01-14 18:54:31
描述：获取匹配元素集中每个元素的前一个同级元素，可选地通过选择器进行筛选。
这些链接不是同级的。
$("li").hover(function() {
$(this).children().animate({
color: '#0099FF',
borderRightColor: '#0099FF'
}, 500);
$(this).prev().children().animate({borerRightColor: '#0099FF'}, 500);
}, function () {
$(this).children().animate({
color: '#FFFFFF',
borderRightColor: '#FFFFFF'
}, 500);
$(this).prev().children().animate({borerRightColor: '#FFFFFF'}, 500);
});Here's a demo on jsFiddle。我把鼠标悬停在<li>上，这样你就不会到处走动了。
Stack Overflow用户
发布于 2012-01-14 18:54:43
this上下文引用的是悬停的<a>元素，而不是<li>。<a>元素没有以前的同级元素。
使用parent方法访问<li>
$(this).parent()......页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8864521
复制相关文章
相似问题
腾讯云开发者
