代码之家 › 专栏 › 技术社区 › superUntitled

jQuery:故障遍历

jquery

superUntitled · 技术社区 · 15 年前

我试图在jQuery中找到一些关于遍历的好文档,但还没有找到好的资源,任何建议都将不胜感激。

我正在尝试为菜单创建一个简单的动画。

我有一个简单的菜单:

<ul class='contentNav'>
 <li><a href='#'>One</a>
 <li><a href='#'>Two</a>
 <li><a href='#'>Three</a>
 <li><a href='#'>Four</a>
</ul>

和一个简单的jquery函数来更改标记的背景颜色:

$(document).ready(function(){

   $(".contentNav a").hoverIntent(
   function(over) {
     $(this).animate({backgroundColor: "#844"}, "fast");
     $(this).parent().find("li a").animate({backgroundColor: "#090"}, "fast");
   },
   function(out) {
     $(this).animate({backgroundColor: "#000"}, "fast");
     $(this).parent().find("li a").animate({backgroundColor: "#000"}, "fast");
   });
});

问题在于线路:

$(this).parent().find("li a").animate({backgroundColor: "#090"}, "fast"); 
$(this).parent().find("li a").animate({backgroundColor: "#000"}, "fast");

谢谢

$(this).parent().parent().find("a").not(this).animate({backgroundcolor: "#555"}, 100)

4 回复 | 直到 15 年前

richsage 15 年前

您的行缺少一个额外的父行:

$(this).parent().parent().find("li a").animate({backgroundColor: "#090"}, "fast"); 
$(this).parent().parent().find("li a").animate({backgroundColor: "#000"}, "fast");

由于您的初始选择器位于“a”标记上,因此如果要使用find(“li a”)选择器,您需要先转到“li”标记,然后再转到包含的div。

Jonathan Sampson 15 年前

如果要选择除悬停元素外的所有元素,可以执行以下操作:

// first add class to hovered element when hovering over
$(this).addClass("hovered");
// then select all but that one
$(this).parent().parent().find("li a").not(".hovered").animate({backgroundColor: "#090"}, "fast");

// and remember to remove class when hovering out
$(this).removeClass("hovered");

James A. Rosen 7 年前

从 hoverIntent docs ,hoverIntent调用采用一个配置对象,而不是两个方法。试试这个:

$(document).ready(function(){
  $(".contentNav a").hoverIntent({
    over: function() {
      $(this).animate({backgroundColor: "#844"}, "fast");
      $(this).parent().parent().find("li a").not(this).animate({backgroundColor: "#090"}, "fast");
    },
    out: function() {
      $(this).parent().parent().find("li a").animate({backgroundColor: "#090"}, "fast");
    }
  });
});

his answer ,确定了祖父母的问题。 the idea 使用临时类和 not .

Joel Mueller 15 年前

Vertigo使用临时类的想法应该适用于选择除悬停元素外的所有元素(+1)。

$(document).ready(function(){
   $(".contentNav a").hoverIntent(
   function(over) {
     var current = this;
     $(this).animate({backgroundColor: "#844"}, "fast");
     $(this).parent().parent()
         .find("li a")
         .filter(function() { return this !== current; })
         .animate({backgroundColor: "#090"}, "fast");
   },
   function(out) {
     var current = this;
     $(this).animate({backgroundColor: "#000"}, "fast");
     $(this).parent().parent()
         .find("li a")
         .filter(function() { return this !== current; })
         .animate({backgroundColor: "#000"}, "fast");
   });
});