如何使用jQuery获取没有特定属性的元素

Question

我知道如何获取具有特定属性的元素：

$("#para [attr_all]")

但我如何获取没有特定属性的元素？我尝试过

 $("#para :not([attr_all])")

但这并不起作用。正确的方法是什么？

让我举个例子：

<div id="para">
    <input name="fname" optional="1">
    <input name="lname">
    <input name="email">
</div>

jQuery：

$("#para [optional]") // give me the fname element  
$("#para :not([optional])") //give me the fname, lname, email (fname should not appear here)  

- Billy

Answer 1

如果您的代码示例是您正在使用的确切代码，我认为问题在于额外的空格。

$("#para :not([attr_all])")

应该是。

$("#para:not([attr_all])")

如果你在那个选择器中留下一个空格，它会选择#para的后代元素。

- Frank DeRosa

---

根据原始问题，提问者“想要”选择后代。 - Matteo Tassinari

也许你可以使用 *，但对我来说，我不能留空格。 - Epic Programmer

Answer 2

我想到的第一件事（可能不是最优解）：

$('p').filter(function(){
    return !$(this).attr('attr_all');
});

不过，p:not([attr_all]) 应该可以工作，所以我认为你的代码中发生了其他问题。

- Pim Jager

---

我终于解决了这个问题，原因是代码的另一部分，所以我会将其标记为答案。 - Billy

Answer 3

更快的方法是首先获取具有ID para的所有元素（如果有多个，则使用类而不是ID来考虑），并使用filter（或find，具体取决于HTML的构造方式）方法仅获取没有该属性的元素，如下所示：

$('#para').filter(':not([attr_all])');

这样做可以让jQuery的工作量更小，因为您只需要循环遍历少量没有该属性的元素即可。使用单个选择器语句，例如$("#para :not([attr_all])")，会导致jQuery获取所有没有该属性的元素，然后再筛选出具有ID“ para”的元素。

- bittersweetryan

Answer 4

尝试使用$("#para [attr!=val]")。

您的:not应该可以正常工作，这让我怀疑其他问题正在发生。

有关属性选择器的完整列表，请参见jQuery选择器文档。

- chaos

---

是的，我认为你的问题出在上下文，而不是这个选择器。 - chaos

请注意，此选择器是特定于JQuery的。它不被定义为CSS属性选择器，因此不能用于通过CSS对元素进行样式设置：http://www.w3.org/TR/CSS2/selector.html#attribute-selectors - PatrikAkerstrand

Answer 5

Frank DeRosa的答案基本正确，但由于OP确实想要找到后代，所以有些偏差。我自己尝试了一下，似乎它应该按照现在的方式工作，但是可能你正在运行的内容不喜欢直接使用“：”运算符作为后代。试试使用

$("#para input:not([optional])")

本来想留下评论的，但还不能。

保留html，不做解释。

- Tom Zaczkiewicz

---

或者更广泛的选择器: $("#para *:not([optional])") - Gideon

Answer 6

查找没有alt属性或空alt标签的图像标签。

$('img').each(function( index ) {
    if(typeof $(this).attr('alt') === typeof undefined || $(this).attr('alt') === false ||$(this).attr('alt') === '') {
        console.log(index);
    }
});

- Anil B K

---

虽然这段代码片段可能是解决方案，但包括解释真的有助于提高您的帖子质量。请记住，您正在回答未来读者的问题，而这些人可能不知道您的代码建议的原因。 - Neo Anderson

Answer 7

查看CSS3选择器文档，正确选择没有属性“attr”的节点“node”的方法是：

<node>:not(<node>[<attr>])

E.g.: p:not(p[align])

在你的情况下，$("#para *:not([optional])") 是可行的，并且可能更准确。

":not" 的实际语法是：

<selector1>:not(<selector2>)

这个表达式中有两个选择器，它们选择所有匹配选择器1的节点，然后排除所有匹配选择器2的节点。

我会使用：

$('#para input:not(input[optional])')

    /* or */

$('input:not(input[optional])',$('#para'))

    /* in case jQuery has issues with :not */

$( document.querySelectorAll('#para input:not(input[optional])') )

- Marco Balestra