Как добавить класс CSS в родительский элемент? - PullRequest
Новая
       23

Как добавить класс CSS в родительский элемент?

0 голосов
/ 09 июля 2011

Я пытаюсь сделать что-то довольно простое, но я, вероятно, что-то упускаю ...

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

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');

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

Ответы [ 3 ]

4 голосов
/ 09 июля 2011

У элемента может быть только один родительский элемент. 

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

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

Вы также можете изменить свой код следующим образом:1006 * 

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');
    }
);
2 голосов
/ 09 июля 2011

Похоже, вы хотите добавить класс ко всем родителям элементов $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 th.

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

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

0 голосов
/ 09 июля 2011

это выбирает непосредственного родителя 

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

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

$('your_selector').parents('selector').doSomeThing()
...