Question

我知道我可以做到这一点，我只是迷失在等级制度中，需要第二眼看到它。

这是使用的结构：

<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添加任何类。我已经有一个悬停功能，可以将课程'.active'添加到.nav-column li

编辑编辑

我发现我的代码出错了，事实上正确的代码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>

再一次......我很抱歉......你能感觉到我的理智水平下降

Answer 1

认为这就是你想要的：

$('.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()

如果条件不确定谁是$(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");
    } 
});

小提琴：

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

Answer 2

您需要使用.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");

Answer 3

使用.closest()或.parents()代替.parent()。 div家也不是.nav-column的兄弟姐妹。您需要使用.find()代替.siblings()。请尝试：

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

或

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

Answer 4

.parent（）只上一个节点，你需要使用.parents（'select'）

Answer 5

如果我理解：

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

这会将“Cheese”类添加到任何活动的li：）

Jquery如果是hasClass然后是addClass

5 个答案: