jQuery: Trouble Traversant

Question

J'ai essayé de trouver une documentation décente sur la traversée dans jQuery, mais je n'ai pas trouvé de ressource décente, toute suggestion serait très appréciée. Je suis en train de créer une animation simple pour un menu. J'essaye de créer une animation simple pour un menu.

J'ai un menu simple:

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

Et une simple fonction jquery pour changer la couleur d'arrière-plan de l'étiquette:

$(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"); 
    }); 
}); 

Le problème est avec les lignes:

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

J'essaie de sélectionner tous les éléments de balise de lien qui ne sont pas actuellement survolés et de définir leur backgr couleur de l'ound. Comment puis-je faire cela.

Merci.

---

MISE À JOUR

---

j'ai pris toutes les recommandations et trouver le code suivant:

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

Answer 1

A partir du hoverIntent docs, l'appel hoverIntent prend un objet de configuration et non deux méthodes. Essayez ceci:

$(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"); 
    } 
    }); 
}); 

Pointe du chapeau à richsage pour his answer, qui a identifié le problème des grands-parents. Et un autre à Vertigo pour the idea pour utiliser la classe temporaire et not.

Answer 2

Vos lignes manquent un parent supplémentaire:

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

Depuis votre sélection initiale ou est sur la balise 'a', vous voulez remonter une fois à la balise 'li' et ensuite à nouveau à la div contenant si vous voulez ensuite utiliser le sélecteur find ("li a").

Answer 3

Si vous voulez sélectionner tous, mais l'élément plané vous pourriez faire quelque chose comme ceci:

// 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"); 

Answer 4

idée de Vertigo d'utiliser une classe temporaire devrait fonctionner pour sélectionner tous, mais l'élément plané (+1 pour cela).

Toutefois, une autre méthode qui devrait également fonctionner consiste à utiliser la méthode filter() et à comparer les instances d'éléments dom. Cette approche peut être légèrement plus rapide que l'ajout et la suppression de noms de classe, mais s'il y a une différence de performance, elle est probablement très faible.

$(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"); 
    }); 
});