Question

我想做一些相当简单的事情，但我可能错过了一些东西......

我有这段代码：

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

我错过了什么？

Answer 1

元素只能有一个父元素。

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

Answer 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元素，然后选择其父元素。

但正如您在上面所看到的，它更容易，您根本不需要循环。

Answer 3

这会选择直接父母

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

选择父

中的多个元素

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

如何将css类添加到父元素？

3 个答案: