2011-07-09 2 views
0

Я пытаюсь сделать что-то довольно простой, но я, вероятно, что-то отсутствует ...Как добавить класс css в родительский элемент?

У меня есть этот код:

var $highlights = $j("div.ab-highlights ul li a"); 
$highlights.hover(
    function() { 
     $j(this).children().addClass('active'); 

     for (i=0; i < $highlights.length; i++) 
     { 
      if ($highlights[i] != this) 
      { 
       console.log(i); 
       ($highlights.parent()[i]).addClass('lowOpacity'); 
      } 
     } 
    }, 
    function() { 
     $j(this).children().removeClass('active'); 
    } 
); 

Суть заключается в том, что я пытаюсь прикрепить класс («lowOpacity») ко всем элементам, кроме той, которую я переворачиваю. дело в том, что это не сработает. линия, которая не работает, составляет

($highlights.parent()[i]).addClass('lowOpacity'); 

Что мне не хватает?

+0

Ошибки, сообщения должны дать некоторые указания, что это неправильно.Прочитайте их :) –

+0

Вам не нужно устанавливать одинаковый класс для всех родителей. Если вы правильно укажете свой CSS, вы сможете поместить класс в родительский уровень верхнего уровня, который вы хотите применить, и чтобы все дети автоматически выполнялись этим классом верхнего уровня. Речь идет только об использовании правильного CSS, но это сделает ваш JS намного проще. – jfriend00

ответ

4

Элемент может иметь только один родительский элемент.

$j($highlights[i]).parent().addClass('lowOpacity'); 

Этот код добавит класс к родительскому элементу каждого элемента подсветки.

Вы также можете реорганизовать свой код так:

var $highlights = $j("div.ab-highlights ul li a"); 
$highlights.hover(
    function() { 
     $j(this).children().addClass('active'); 
     $j($highlights).not(this).parent().addClass("lowOpacity"); //Thanks Felix +1 
    }, 
    function() { 
     $j(this).children().removeClass('active'); 
    } 
); 
+1

Я думаю, что это должно быть '$ ($ highlights [i]). Parent()', хотя. Он имеет набор элементов и извлекает родительский элемент для элемента с заданным индексом 'i'. –

+0

У него также есть jquery, сопоставленный с $ j, поэтому $ J ($ highlights [i]). Parent() –

+0

А, это верно. –

2

Кажется, вы хотите добавить класс для всех родителей в $highlights элементов, ожидают, что в настоящее время колебались одно:

$highlights.not(this).parent().addClass('lowOpacity'); 

Этот строка кода заменяет целикомfor петля.

Ссылка:not

Я думаю, вы также должны удалить lowOpacity из элементов снова. Вы можете уменьшить свой код на этот:

var $highlights = $j("div.ab-highlights ul li a"); 
$highlights.hover(function() { 
    $j(this).children().toggleClass('active'); 
    $highlights.not(this).parent().toggleClass('lowOpacity'); 
}); 

Объяснение того, почему ваш код не работает:

$highlights.parent()[i] 

возвращает DOM элемент, но addClass является метод JQuery. Таким образом, вы должны передать его JQuery снова или использовать вместо eq[docs]:

$highlights.parent().eq(i).addClass('lowOpacity'); 

Что это делает становится все родительские элементы элементов в $highlights, а затем выбрав i-й один.

Другим способом было бы сначала выбрать i-й элемент в $highlights, а затем его родительский.

Но, как вы видели выше, это намного проще, и вам не нужно вообще петля.

0

это выбирает Материнскую

$('your_selector').parent().doSomeThing() 

выбрать несколько элементов в родителе

$('your_selector').parents('selector').doSomeThing() 
Смежные вопросы