多個列表項的兄弟姐妹

好的，我得出結論：.siblings（）默認只允許一個選擇器或元素爲父項，其餘的可以是兄弟。多個列表項的兄弟姐妹

如何將一個類應用於多個項目並將其從其餘兄弟中移除？

$("#CarePointSAHAIDID").click(function() { 
    $("li.carepoint, li.saha, li.idid").addClass("active").siblings().removeClass("active");  
    });

對不起，我想我張貼的HTML

<ul> 
<li class="hometownnorth"><a href="#"></a></li> 
<li class="clearwater"><a href="#"></a></li> 
<li class="kootenai"><a href="#"></a></li> 
<li class="carepoint"><a href="#"></a></li> 
<li class="saha"><a href="#"></a></li> 
<li class="idid"><a href="#"></a></li> 
<li class="hometowneast"><a href="#"></a></li> 
<li class="portneuf"><a href="#"></a></li> 
<li class="mountainview"><a href="#"></a></li> 
</ul>

來源

2016-08-16 tony noriega

我們需要在這裏看到你的HTML，但假設'.carepoint'，'.saha'和'.idid'互爲所有兄弟，那麼你所有，但消除類通過jQuery對象中的元素循環執行的最後一個元素。 –

你說「兩項」，但你的代碼顯示的選擇器可能會返回兩個以上。不完全確定你在問什麼。 –

爲什麼不先從所有列表項中移除類，然後將類添加到需要它的類中？ '.siblings（）'實際上可能工作，但是沒有看到你的HTML，我們不知道。 – j08691

您只需通過添加.not()刪除集合：

$("li.carepoint, li.saha, li.idid").addClass("active").siblings().not("li.carepoint, li.saha, li.idid").removeClass("active");

jsFiddle example

該文檔爲.siblings()竟說：

如果您需要兄弟姐妹的獨家列表，使用$collection.siblings().not($collection)。

一個簡單的方法是先從所有列表項中刪除活動類，然後只需將它們添加到您想要的：

$("li").removeClass("active"); 
$("li.carepoint, li.saha, li.idid").addClass("active");

jsFiddle example

來源

2016-08-16 21:27:04 j08691

這工作。謝謝。 –

不值得成爲一個單獨的解決方案，但我把這一個扔在一起 - 這是兩種方法的混合體，但更接近於第二種。避免像第一個解決方案那樣兩次查詢整個文檔，但這種方法更像第二種方法 - 從所有文檔中刪除活動並將其添加到需要的文檔中。在這種情況下使用兄弟姐妹是完全無關的，它擴大範圍只是爲了再次過濾。 https://jsfiddle.net/svcc9vje/ – Mic

可以隨時刪除所有級別active，然後將active添加到你想要的。

$(document).ready(function() { 
 
    $(".clickme").on('click', function() { 
 
    $("li").removeClass("active"); 
 
    $("li.carepoint, li.saha, li.idid").addClass("active"); 
 
    }); 
 
});

.active { 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li class="hometownnorth"><a href="#">hometownnorth</a></li> 
 
<li class="clearwater"><a href="#">clearwater</a></li> 
 
<li class="kootenai"><a href="#">kootenai</a></li> 
 
<li class="carepoint"><a href="#">carepoint</a></li> 
 
<li class="saha"><a href="#">saha</a></li> 
 
<li class="idid"><a href="#">idid</a></li> 
 
<li class="hometowneast"><a href="#">hometowneast</a></li> 
 
<li class="portneuf"><a href="#">portneuf</a></li> 
 
<li class="mountainview"><a href="#">mountainview</a></li> 
 
</ul> 
 

 
<button class="clickme">clickme</button>

來源

2016-08-16 21:29:55 indubitablee

多個列表項的兄弟姐妹

回答

相關問題