如何选择所有类而不是单击元素？

当我们需要在页面中选择所有拥有某个类的元素时，通常的做法是使用 jQuery 的 $(".class-name") 选择器。但是如果除了单击的元素之外，我们需要选择所有拥有该类的元素怎么办呢？在这篇文章中，我们将会介绍两种方法来解决这个问题。

方法一：使用 :not() 伪类

第一种方法是使用 :not() 伪类来排除当前单击的元素。下面是一个示例代码：

<div class="container">
  <div class="my-class">元素1</div>
  <div class="my-class">元素2</div>
  <div class="my-class">元素3</div>
</div>

$(".my-class").on("click", function() {
  $(".my-class:not(this)").addClass("selected");
});

在上面的代码中，$(".my-class:not(this)") 将会选择所有拥有 .my-class 类的元素，但是排除当前被单击的元素。接着，我们为这些元素添加了 .selected 类，实现了对所有拥有 .my-class 类的元素进行操作的目的。

方法二：使用 .not() 方法

另一种方法是使用 jQuery 提供的 .not() 方法。同样，我们可以用它来排除当前单击的元素，如下所示：

$(".my-class").on("click", function() {
  $(".my-class").not(this).addClass("selected");
});

在这个示例中，.not(this) 方法将会排除当前单击的元素，然后我们就可以对其他拥有 .my-class 类的元素进行操作了。

结论

以上两种方法都可以实现对除了单击的元素之外的所有具有某一类的元素进行选择和操作。虽然两种方法都差不多，但是使用 .not() 方法更容易理解和维护，因此我们建议使用第二种方法。

希望本文能够帮助您解决这个前端开发中常见的问题，并且提高您的代码效率和可读性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13515