Question

好的，我得出的结论是.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>

Answer 1

您只需添加.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

Answer 2

您可以随时删除所有课程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>

多个列表项的兄弟姐妹

2 个答案: