在jQuery中，如何将.not应用于$（this）以及其他元素？

Question

所以，我有一个包含类class1和class2的div的html文档。如果我想将某个函数应用于除我刚刚点击的那个（即$(this)）以及.class1和class2的所有div之外的所有div，则使用的jQuery语法是什么？ ？ （顺便说一下，$(this)不需要拥有这些类中的任何一个。）

我尝试了各种组合，例如

$('div').not($('.class1,.class2',this)).addClass('class3');

但似乎都没有效果。

非常感谢！

Answer 1

您可以将.not个函数串联起来。请参阅以下示例。

$(".clickme").click(function () {
  $('div').not('.class1, .class2').not(this).addClass('class3');
});

.class3 {
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">class1</div>
<div class="class2">class2</div>
<div>will light up</div>
<div class="clickme">Click me</div>

Answer 2

有几种方法可以在jQuery中执行此操作。第一个选项是您所追求的选项，但如果您不需要直接使用this和硬编码元素，您也可以在CSS中使用not。我把它包括在内，因为它值得注意。

.not()

$("div").not(".class1").css("background-color", "red");

$("div").not(".class1").not(".class2").css("font-size", "24px");

<div class="class1">Test 1</div>

<div class="class2">Test 2</div>

<div class="class3">Test 3</div>

CodePen Example

您可以使用.not()功能选择一个元素并自行修改它或将它们依次链接在一起，这就是您所需要的。你不能在括号内添加另一个类，因为jQuery会认为它们是链接在一起而不是将它们视为单独的规则。

:not（ in jQuery ）

$("li:not(:last-of-type)").css("background-color", "blue");

如果您不需要使用this将当前选择器指定为变量，则使用CSS的另一个选项。不理想，但可以选择。

:not（CSS中的 ）

div:not(.orange) { color: green; }

与上面相同，但同样需要在选择器名称中进行硬编码。不太理想，但本机CSS支持的另一种选择。