Question

if ($(this).hasClass('white')) {console.log('white');};

等于true并打印到控制台。如何在$（this）选择器上测试它是否没有类white？我有

if ($('this:not(.white)')) {console.log('not white');};
and
if ($(this).not('.white')) {console.log('not white');};
and
several other combinations?

我知道我可能应该使用.not（）方法，并且无法弄清楚如何将：not选择器与$(this)选择器结合使用。

我想在单击元素时，我可以看到一个真实的和一个错误的陈述。（它要么具有或不具有“白色”类别）

Answer 1

您可以使用not logical operator，试试这个：

if (!$(this).hasClass('white')) {console.log('not white');};

如果单个操作数可以转换为true，则返回false;否则，返回true。

Answer 2

我认为在这两个陈述中了解您正在跨越的域名可能会有所帮助。

if ($('this:not(.white)')) {console.log('not white');};

此语句不起作用，因为选择器 - this:not(.white)将查找此类别的元素：<this class="white"></this>。换句话说，您的选择器正在查找类型为this的HTML元素，该元素不属于white类。

if ($(this).not('.white')) {console.log('not white');};

在这种情况下，您正在使用$(this)，它将this关键字引用的JavaScript对象包装在jQuery对象中，从而允许您对该DOM元素使用jQuery方法。

为了获得您正在寻找的效果，您必须了解传递给$(selector)的任何STRING选择器都被限制为CSS可以匹配的选择器。因此 - 您不能以这种方式使用“this”关键字。

但是，您可以做些什么，检查您的效果如下：

if ($(this).is(':not(.white)')) {
    console.log('Not White! :(');
} else {
    console.log('White! :D');
}

因为您将this放在$()块中，结果是所有应用的jQuery链接方法都针对当前上下文中this引用的DOM元素进行解析。然后，您使用CSS :not()选择器检查类。

但请注意，此方法的局限性在于，如果由于某种原因this引用了多个DOM元素，.is()结果只会返回true所有这些元素匹配选择器。所以 - 考虑这个例子：

<div class="one white element"></div>
<div class="one black element"></div>
<div class="one green element"></div>

$('.one.element').bind('click', function () {
    // In this context, 'this' refers to the element which was clicked.
    console.log( $(this).is(':not(.white)') );

    // If you click either the black or green element, you will get a 'true',
    // because those elements are not .white.
    // If you click the white element, you will get a 'false',
    // because that element does have the .white class
});

问题是this的上下文在大多数JavaScript应用程序中经常发生变化，因此我知道的大多数程序员都会尽可能避免使用它。比上面更安全的是：

$('.one.element').bind('click', function (ev) {
    var $el = $(ev.target);
    console.log( $el.is(':not(.white)') );

    // In this case, you avoid 'this' entirely, and target the actual element
    // from which the event originated.
});

但是，在这种情况下，您会遇到嵌套项目引发错误目标的问题。考虑这种情况：

<div class="parent">
    <div class="child">
        text
    </div>
</div>

$('.parent').bind('click', function (ev) {
    var $el = $(ev.target);
    console.log( $el.attr('class') );
});

在这种情况下，如果您点击parent本身，则会得到parent作为结果。但是，如果单击子项，即使事件绑定到父元素，由于事件冒泡，您将获得child。实际事件是由子元素引发的，因此您的定位错误。

所以 - 通常在构建插件时，谨慎控制引用是明智的。

实施例

<div class="parent">
    <div class="child">
        text
    </div>
</div>

var $parent = $('.parent').bind('click', function () {
    console.log( $parent.attr('class') );
});

现在无论您是单击父级还是子级，都可以获得正确的结果，并且知道您所引用的内容。不会混淆this上下文更改，也不会使用下级节点的属性。

顺便说一下 - 此处其他答案中公布的任何方法都是有效的。

// The following will all tell you if the node HAS the class:
$(selector).hasClass('white')
$(selector).is('.white')
$(selector).is('[class*=white]')

// The following will all tell you if the node DOES NOT have the class:
!$(selector).hasClass('white')
$(selector).not('.white')
$(selector).is(':not(.white)')

并且 - 还有其他方法可以做到，但这些方法中的任何一个都可以用于您的目的。：）

Answer 3

使用逻辑非运算符

if (!$(this).hasClass('white')) {console.log('not white');};

Answer 4

!$(this).hasClass('white')

使用纯JavaScript

Answer 5

请使用!，例如：

if (!$(this).hasClass('white'))
  ...

Answer 6

或者：

<div class="vvvv vvvvv white nnnnnn" id="test"></div>

if($("#test[class*=white]").length > 0){
    console.log('white');
}else{
    console.log('no white');
}

Jquery测试$（this）是否没有特定的类

6 个答案: