jQuery如果有类，则添加类。

Question

jQuery如果有类，则添加类。

3

我知道我能做到这个，只是在层次结构上有些迷茫，需要另一双眼睛来看看。

这是我正在处理的结构：

<div class="nav-column">
    <ul>
        <li><a href="#">Link 01</a>
            <div>
                <ul>
                    <li><a href="#">Sublink 01</a></li>
                    <li><a href="#">Sublink 02</a></li>
                    <li><a href="#">Sublink 03</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">Link 02</a></li>
        <li><a href="#">Link 03</a></li>
    </ul>
    <div class="home"><h3>Underlying Div</h3></div>
</div>

我可以帮助您翻译以下内容：当您悬停在 .nav-column ul li a 上时，div.home 的可见性会关闭。当然，会有多个 .nav-columns ，所以我正在使其动态化。

我现在拥有的 jQuery 代码是：

if ($('.nav-column li').hasClass('active')){
     $(this).parent('.nav-column').sibling('div.home').toggleClass("off");
}

在不向div.home添加任何类的情况下。我已经有一个悬停功能，可以向.nav-column li添加和删除类'.active'

编辑编辑编辑

我发现我的代码有误，事实上正确的代码是将div.home放在div.nav-column之外

这是正确的层次结构：

<div class="wrapper">
    <div class="nav-column">
        <ul>
            <li><a href="#">Link 01</a>
                <div>
                    <ul>
                        <li><a href="#">Sublink 01</a></li>
                        <li><a href="#">Sublink 02</a></li>
                        <li><a href="#">Sublink 03</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Link 02</a></li>
            <li><a href="#">Link 03</a></li>
        </ul>
    </div>
    <div class="home"><h3>Underlying Div</h3></div>
</div>

再次道歉...非常抱歉...你能感觉到我的理智水平正在下降

- Murphy1976

但是，div.home并不是.nav-column的兄弟节点，尽管你没有正确缩进代码，很难看出来。 - CodingIntrigue

请放置完整的jQuery函数，因为我们不知道$(this)是谁。 - LGVentura

5个回答

5

你需要使用.parents()而不是.parent()。.parents()会遍历整个DOM树，而.parent()只能获取当前元素的直接父级元素。

$(this).parents('.nav-column').siblings('div.home').toggleClass("off");

由于您并没有针对选择器的直接父级（ul）进行目标定位，因此您需要使用.parents()。

~~此外，您还有第二个问题。根据您的代码结构，div.home不是.nav-column的同级元素。您可以改用.find()。~~

根据您最后的编辑，先前的语句已不再适用。代码片段已更新以反映您的编辑更改。

或者，您可以执行以下操作以实现相同的效果：

$(this).parents('.nav-column').next().toggleClass("off");

- War10ck

2

使用.closest()或.parents()代替.parent()。此外，div home不是.nav-column的兄弟元素。您需要使用.find()代替.siblings()。尝试这样做：

 $(this).closest('.nav-column').find('div.home').toggleClass("off");

或者

 $(this).parents('.nav-column').find('div.home').toggleClass("off");

- Milind Anantwar

1

.parent()只能向上遍历一个节点，你需要使用.parents('select')。

- workabyte

0

如果我理解正确：

$('.nav-column li').forEach(elem, index){
    elem = $(elem);
    if (elem.hasClass('active')){
       elem.addClass("Cheese");
    }
}

这将向任何活动的 li 添加类 "Cheese" :)

- woverton

好像我没有。可能仍然有帮助 :) - woverton

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LGVentura · Accepted Answer

我想您需要的是这个：

$('.nav-column li').each(function(){
    if($(this).hasClass('active')) {
        $(this).closest('.nav-column').siblings('div.home').toggleClass("off");
    } 
});

小提琴:

http://jsfiddle.net/Jf8mp/

你的错误：

.sibling('div.home') 是错误的，正确的方法名是 .siblings()

if条件不能确定谁是 $(this)，你需要使用函数如 .each()

更新：

为了使其在悬停在 .nav-column ul li a 上时起作用：

$('.nav-column li').on('mouseenter','a',function(){
    if($(this).closest('li').hasClass('active')) {
        $(this).closest('.nav-column').siblings('div.home').toggleClass("off");
    } 
});

Fiddle:

http://jsfiddle.net/Jf8mp/2/