jquery添加指向导航的指针

问题描述：

我遇到问题。每次我将鼠标悬停在我的列表上（无论它是哪个列表项），类会在整个列表中添加.hover。所以班级是。我意识到我通过jQuery添加了这些，但如何让jquery只添加一个列表锚点而不是全部锚点。jquery添加指向导航的指针

$('.menuContainer li a').append('<span></span>'); 

$(".menuContainer li a").mouseover(
     function() { 
      $(this).addClass("over"); 
      $('.menuContainer li a span').addClass('hover'); 
     return false; 
}); 
$(".menuContainer li a").mouseout(
     function() { 
      $(this).removeClass("over"); 
      $('.menuContainer li a span').removeClass('hover'); 
     return false; 
}); 

<div class="menuContainer"> 
<ul> 
<li class="1"> 
<a href="#">list item<span></span></a> 
</li> 
<li class="2"> 
<a href="#">list item<span></span></a> 
</li> 
<li class="3"> 
<a href="#">list item<span></span></a> 
</li> 
</ul> 
</div>

我的目标是让类有一个背景图像，这将是一个指针，强调当前被挖出的东西。

只是为了清楚起见，（因为你有两个很好的答案如下图）需要记住的是jQuery的默认情况下所有元素相匹配是非常重要的。 – jcolebrand 2011-01-14 02:45:58

答

因为你要选择的当前锚的跨度，你应该使用下面的符号$("span", this)作为选择......是这样的：

$('.menuContainer li a').append('<span></span>'); 

$(".menuContainer li a").mouseover(
     function() { 
      $(this).addClass("over"); 
      $("span", this).addClass('hover'); 
     return false; 
}); 
$(".menuContainer li a").mouseout(
     function() { 
      $(this).removeClass("over"); 
      $("span", this).removeClass('hover'); 
     return false; 
});

在本post它执行指出指定的选择器元素中的.find（）。

希望帮助:)

打我30秒;） – jlmakes 2011-01-14 02:25:07

答

Damien-at-SF的答案是不够公平的。但我认为这只会增加另一项工作。

为什么不留下你的代码，因为它是和css玩。如果你想样式化<span>的，像这样做，

.menuContainer li a.over span { .... } 
.menuContainer li a.over span.hover { .... }

和我的经验，最好是添加/删除类（以这样的情况），在那里你可以有兄弟姐妹关系（在这种情况下，<li>'s）。

那么你的代码将被缩短到这样的事情，

$(".menuContainer li a").mouseover(
    function() { 
     $(this).closest('li').addClass("over").find('span').addClass('hover') 
     .end().siblings().removeClass("over").find('span').removeClass('hover'); 
}).append('<span></span>');

jquery添加指向导航的指针

相关推荐