如何确定哪个元素具有特定的类名？

Question

我有这样的HTML结构：

$("li").on("click", function(){ 
 
    // I need to remove active-class form current element 
 
    $(this).addClass("active"); 
 
});

li:hover{ 
 
    background-color: #eee; 
 
    cursor: pointer; 
 
} 
 

 
.active{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Numbers: 
 

 
<ul> 
 
    <li>One</li> 
 
    <li class="active">Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
</ul>

在上面的代码，当你点击<li>标签的内容，active类将被添加到该元素。现在我想检测active类是在哪个元素上？并从其中删除该类首先（.removeClass()），然后将active类添加到单击的元素。换句话说，我需要使它（active类）独一无二。

我该怎么做？

Answer 1

您可以使用.siblings()

$("li").on("click", function(){ 
 
    $(this).siblings().removeClass('active'); 
 
    $(this).addClass("active"); 
 
});

li:hover{ 
 
    background-color: #eee; 
 
    cursor: pointer; 
 
} 
 

 
.active{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>One</li> 
 
    <li class="active">Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
</ul>

Answer 2

只要使用此：

$("li").on("click", function(){ 
    $('li.active').removeClass('active'); 
    // I need to remove active-class form current element 
    $(this).addClass("active"); 
}); 

首先从以前的有源元件清除活性类：$('li.active').removeClass('active')，然后简单地更新点击的元素。

Answer 3

使用不（）选择所有活动类里的除了点击一个并删除其ACTIV CLAS

$("li").on("click", function(){ 
    $(this).addClass("active"); 
    $("li.active").not(this).removeClass('active'); 
}); 

Answer 4

试试这个

$("li").on("click", function(){ 
    $("li.active").removeClass("active"); 
    $(this).addClass("active"); 
});