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

等于true并打印到控制台。如果$（this）选择器上没有类

white

，如何测试？我有

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

我知道我可能应该使用.not（）方法，但不知道如何将：not选择器与

$（this）

选择器结合使用

---

我希望当单击元素时，我可以看到一个true和一个false语句。（它有或没有“白色”类）

您可以使用

非逻辑运算符，请尝试以下操作：

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

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

使用普通JavaScript时，请使用逻辑not运算符

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

使用
如非，例如：

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

或：


如果（$（“#测试[类*=白色]”）。长度>0）{
console.log（'white'）；
}否则{
console.log（“无白色”）；
}
我认为理解这两个语句中所跨越的领域可能会有所帮助

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

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

此语句将不起作用，因为选择器-
This:not（.white）
将查找以下类型的元素：
。换句话说，您的选择器正在查找类型为
this
的HTML元素，它不是类
white

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

在本例中，您使用的是
$（this）
，它将
this
关键字在jQuery对象中引用的JavaScript对象包装起来，从而允许您对该DOM元素使用jQuery方法

为了获得想要的效果，您必须了解传递给
$（选择器）
的任何字符串选择器都被约束为CSS可以匹配的选择器。因此，你不能这样使用你的“this”关键字

但是，要检查效果，您可以执行以下操作：

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

因为您将
this
放在
$（）
块中，结果是应用的任何其他jQuery链接方法都会针对当前上下文中该
引用的DOM元素进行解析。然后使用CSS
：not（）
选择器检查该类

但是，请注意，这种方法的局限性在于，如果出于任何原因，
this
引用多个DOM元素，
.is（）
结果只会在所有这些元素都与选择器匹配时返回
true
。所以，考虑这个例子：

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

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

$('.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>

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

还有-还有其他方法可以做到这一点，但这些方法中的任何一种都应该适用于您的目的。：）
 
console.log（“非白色”）
；）
<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
});

$('.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') );
});

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

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

// 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)')