jQuery获取所有没有class属性的div

Question

获取所有具有class属性的div

$('div[class]')

获取所有没有class属性的div

$('div[class!=""]')

这段代码有效,但我不明白为什么它有效.如果上面的代码工作,那么具有class属性的所有div的代码应该是

$('div[class=""]') 

这不会产生任何结果.

Answer 1

尝试使用:not()伪类选择器:

$('div:not([class])')

编辑

jQuery选择器的描述说:

• [attribute]
  匹配具有指定属性的元素.
• [attribute=value]
  匹配具有特定值的指定属性的元素.
• [attribute!=value]
  匹配既没有指定属性,也没有指定属性但没有特定值的元素.

这意味着div[class=""]将选择class具有使用空值指定的属性的所有DIV元素.

但是最后一个选择器是jQuery的专有选择器而不是CSS选择器.您需要使用:not()选择所有没有类的DIV元素:

div:not([class])

Answer 2

重要的是要知道有空类属性以及没有类属性的元素,但它们需要不同的测试来选择.

有许多测试都做不同的事情.这是我们测试的HTML:

<div class="">Empty Class Attribute </div>
<div class="column">Full Class Attribute </div>
<div>No Class Attribute </div>

现在,让我们运行我们的测试(第一部分只是一个字符串,可以帮助我们知道警报中刚刚调用的内容,否则它没有意义):

$(document).ready(function(e){
  // Outputs "Empty Class Attribute Full Class Attribute"
  alert( "div[class] : "     + $('div[class]').text()     );

  // Outputs "Full Class Attribute"
  alert( "div[class!=''] : " + $('div[class!=""]').text() );

  // Outputs "Empty Class Attribute" 
  alert( "div[class=''] : "  + $('div[class=""]').text()  );

  // Outputs "No class Attribute"
  alert( "div:not([class]) : " + $('div:not([class])').text()     );
});

您可以在浏览器中查看此代码:http://jsbin.com/ijupu

现在,掌握了这些知识,如果您想要div使用空白属性和无属性选择页面上的每个元素,请使用以下选择器:

$("div[class=''], div:not([class])");