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

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循环。

参考： 不

我想你也有再次从元素中删除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第一个。

另一种方法是首先选择 $highlights 中的第 i 个元素，然后选择其父元素。

但正如您在上面所看到的，它要容易得多，而且您根本不必循环。

Answer 3

这选择直接父级

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

选择父级中的多个元素

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