jquery - jQuery not() 函数

Question

为什么小提琴不能正常工作

HTML

<div>
    <div>
        <div class="class-fake fake-class">Some other data</div>
        <div> Some data</div>
    </div>
    <span>
        Span data
    </span>
</div>

JS

$(document).ready(function () {
    $("*").not(".class-fake").css("color", "red");
    //Div with class-fake should not turn to red
});

http://jsfiddle.net/ZSL9H/

我用 $("div") 替换了 $("*") 但结果是一样的。

编辑 ：

我正在尝试做的事情：基本上我想向正文添加一个事件，以便如果单击匹配的元素以外的任何元素，$('.class-fake')则执行一个函数。所以我正在使用事件委托，这样每个元素都不会附加一个事件：

$("*").on("click", ":not(.class-fake)", function(){
 //execute
});

此外，.class-fake元素还添加了一个单独的click事件。

以上也行不通。即使我单击.class-fake元素，也会触发该事件。所以我虽然建议使用$("*").not('.class-fake')since.not():not()

Answer 1

代码没有div在 class上设置样式class-fake。

它在元素的所有父元素（包括htmlandbody元素）上设置样式，这使得该元素内部的文本div也变为红色，因为它从父元素继承了颜色。

有些样式是继承的，例如color样式。您可以使用不同的样式，例如border，它不是继承的，以查看该样式实际上未在元素上设置：

http://jsfiddle.net/ZSL9H/3/

---

编辑：

您不能通过从委托中排除事件来阻止事件的发生，因为事件只会冒泡并发生在父元素上。

捕获所有元素上的事件，stopPropagation用于防止它冒泡，并且仅在单击的元素不是您要排除的元素时才执行您的代码：

$("body").on("click", "*", function(e) {
  e.stopPropagation();
  if (!$(e.currentTarget).is('.class-fake')) {
    // execute
  }
});

演示：http: //jsfiddle.net/rNqw8/1/

Answer 2

因为not()不排除父div元素。很难指导您采用更好的方法，因为您没有具体说明您要做什么。

快速修复如下，但这非常依赖于 DOM 结构：

$("div > div > div").not(".class-fake").css("color", "red");

Answer 3

Jquery 会产生这样的结果：

   <div style="color: red">
         <div style="color: red">
             <div class="class-fake fake-class">Some other data</div>
             <div style="color: red"> Some data</div>
          </div>
          <span style="color: red">
              Span data
           </span>
    </div>

如您所见......父母有一个“颜色：红色”......所以孩子也是红色......

Answer 4

正如 Rory McCrossan 所说，您只是说您不想将该 css 规则应用于 .class-fake，而是将其应用于其父级等等，从而使 .class_fake 继承该规则。

你可以这样做：

$(".class-fake").css("color", "black");

编辑：

这对我来说似乎是传播。使用这个http://api.jquery.com/event.stopPropagation/

$(".class-fake").click(function(event){
  event.stopPropagation();
});