jquery - 如何从 li 元素列表中添加和删除类？

Question

如果我有一个像这样的 li 列表:

<ul>
<li>first </li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>

我如何在 jquery 中编写代码以将类添加到 li 元素，比如说，首先而不将该类添加到其他元素？

我尝试过这个，但它当然会添加到所有 li 元素中。

$(document).ready(function() {
$("ul li").click(function() {
if(!$("ul li").hasClass('active'))
{
$("ul li").addClass('active');
}
});

});

我希望能够将类 active 添加到仅单击的 li 元素，并删除添加了 active 的所有其他存在。我该怎么做？谢谢

Answer 1

单向

$("ul li").click(function() {
  var $this = $(this); // reference to the clicked li
  if(!$this.hasClass('active'))
  {
    $this.addClass('active');
    $('ul li').not($this).removeClass('active');
  }
});

实例:http://jsfiddle.net/Xb9yx/

另一种方式

$("ul li").click(function() {
  var $this = $(this); // reference to the clicked li
  if(!$this.hasClass('active'))
  {
    $this.addClass('active').siblings().removeClass('active');
  }
});

实例:http://jsfiddle.net/d5Sde/

这就是可能有一百种方法可以实现同一目标的方法之一。