JQuery: обход проблем

Question

Я пытался найти приличную документацию по обходу в 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)

Answer 1

В ваших строках отсутствует дополнительный родитель:

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

Поскольку ваш начальный селектор находится в теге 'a', вы хотите перейти один раз к тегу 'li', а затем снова к содержащему div, если вы хотите использовать селектор find ("li a").

Answer 2

Если вы хотите выбрать все элементы, кроме элемента наведения, вы можете сделать что-то вроде этого:

// 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 3

Из документов hoverIntent вызов 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");
    }
  });
});

Шляпа подсказка Richsage для его ответ , который выявил проблему прародителя. И еще для Vertigo за идею использовать временный класс и not.

Answer 4

Идея Vertigo об использовании временного класса должна работать для выбора всего, кроме элемента hovered (+1 для этого).

Однако другой способ, который также должен работать, - использовать метод filter () и сравнивать экземпляры dom-элементов. Этот подход может быть немного быстрее, чем добавление и удаление имен классов, но если есть разница в производительности, он, вероятно, очень маленький.

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