JavaScript

Question

我的项目使用普通 JavaScript。我想要 select 没有数据属性值的元素作为 'abcd'。我尝试了以下。

 :not([data-some="abcd"])

this selector returns 只有没有 [data-some] 的元素。但我只想 select 没有数据属性的元素 'abcd'。它可以有 [data-some="gtf"].

非常感谢任何帮助。

注意：我只粘贴了 selector，因为我只需要它们。大多数 Whosebug 问题都有针对没有特定数据属性的 selecting 元素的答案。

Answer 1

获取除值为"abcd"

之外的所有具有属性data-some的元素

$("div[data-some]").not("div[data-some!='abcd']");

https://jsfiddle.net/xz5et4tr/

Answer 2

这个解决方案是可行的，如果你可以使用Array.prototype.filter：

const elements = document.querySelectorAll("[data-some]");
const result = Array.from(elements).filter(el => el.dataset.some !== "abcd");
console.log(result);

<div data-some="abcd"></div>
<div data-some="gtf"></div>
<div data-some="ooo"></div>

它抓取每个具有 data-some 属性的元素，创建一个元素数组，并过滤掉那些不满足条件 el.dataset.some !== "abcd".

的元素

Answer 3

 var test = document.querySelectorAll(':not([data-some="abcd"])');
               for (var i in test) if (test.hasOwnProperty(i)) {
                    (test[i].style.background = "#DCDCDC");
                }

p, h1{
background: #ff7f7f;
}

<div >
<h1 data-some="abcd">hello</h1>
<p data-some="abcd">hello</p>
<p data-some="gtf">hello</p>
</div>

Answer 4

您可以使用单个但相当复杂的选择器：

[data-some]:not([data-some="abcd"])

注意兼容性，您可能需要一个更简单的选择器和一些脚本，具体取决于您需要支持的主机。

例如

[data-some]:not([data-some="abcd"]) {
   background-color: #ffff66;
}

<p data-some="abcd">data-some="abcd"</p>
<p data-some="zzz">data-some="zzz"</p>
<p data-some="">data-some=""</p>
<p>no data-some attribute</p>

JavaScript - Select 具有 [data-some] 属性但没有特定值的所有元素

JavaScript - Select all elements with [data-some] attribute not having a specific value

custom-data-attribute