jquery如果hasClass然后addClass

我知道我可以做到这一点，我只是迷失在层次结构中，需要第二组眼睛。jquery如果hasClass然后addClass

这里的结构“M一起工作：

<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.homediv.nav-column

这是正确的heirarchy：

<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>

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

来源

2014-05-22 Murphy1976

但是，'div.home'不是兄弟'.nav-column'虽然很难看到，因为你没有正确缩进你的代码 – CodingIntrigue

把完整的jQuery函数，因为我们不知道谁是$（this） – LGVentura

思考这是你想要的东西：

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

来源

2014-05-22 15:15:26 LGVentura

我认为这几乎是在那里......当我将鼠标悬停在Link 01上时，我无法使其工作。活动状态正常工作..但没有别的。 – Murphy1976

已更新。看看你是否需要它。 – LGVentura

我不得不将on函数修改为悬停并将切换切换到addClass并追加removeClass ...但这个工作完美... – Murphy1976

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

来源

2014-05-22 14:31:55

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

来源

2014-05-22 14:32:11 War10ck

的.parent（）只到达一个节点，你需要使用。家长（“选择”）

来源

2014-05-22 14:32:50 workabyte

如果我的理解：

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

这将添加类“奶酪”到任何活动的李:)

来源

2014-05-22 14:33:36 woverton

看起来我没有。可能仍然有帮助:) – woverton

jquery如果hasClass然后addClass

回答

相关问题