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

回答

相關問題