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

【问题标题】：How to add css class to parent element?如何将css类添加到父元素？
【发布时间】：2011-07-09 17:12:42
【问题描述】：

我正在尝试做一些相当简单的事情，但我可能遗漏了一些东西......

我有这个代码：

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

我错过了什么？

【问题讨论】：

错误消息应该给出一些指示什么是错误的。阅读它们:)
您不需要为所有父母设置相同的班级。如果您正确指定您的 CSS，您应该能够将类放在您想要影响的顶级父级上，并让所有子级自动受该顶级类的影响。这只是使用正确的 CSS 的问题，但它会让你的 JS 更简单。

标签： javascript jquery css mouseover rollover

【解决方案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');
    }
);

【讨论】：

我认为应该是$($highlights[i]).parent()。他有一组元素，并在给定索引i 处获取元素的父元素。
他也有 jquery 映射到 $j 所以 $J($highlights[i]).parent()
@kmb385：抱歉，是的，如果你只是替换一行，那么它是正确的（我已经在我的脑海中更进一步；）），但这是一种相当“复杂”的方法.你可以更轻松地做到这一点......顺便说一句，我会写$j($highlights[i])而不是$highlights[i].eq(i)。
@Felix Kling 在您上面的评论中是什么意思？ '$highlights.eq(i)'

【解决方案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 中元素的所有父元素，然后选择ith 元素。

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

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

【讨论】：

【解决方案3】：

这会选择直接父级

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

选择父元素中的多个元素

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

【讨论】：