如何確定哪個元素具有特定的類名？

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"); 
});