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

Question

I have this HTML structure:

$("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类)变得唯一。

我如何做到这一点？

- stack

Answer 1

只需使用如下代码：

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

首先从之前的活动元素中删除活动类：$('li.active').removeClass('active')，然后简单地更新点击的元素。

- Dmitri Pavlutin

Answer 2

您可以使用.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>

- Nenad Vracar

Answer 3

使用not()选择除了被点击的激活类li以外的所有激活类，并移除它的激活类。

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

- madalinivascu

Answer 4

试试这个

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

- Lugarini