Question

我的项目使用纯JavaScript。我想选择没有数据的元素 - 某些属性的值为＆＃39; abcd＆＃39;。我尝试了以下内容。

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

此选择器仅返回没有[data-some]的元素。但我想只选择没有数据属性的元素作为＆＃39; abcd＆＃39;。它可以有[data-some =＆＃34; gtf＆＃34;]。

非常感谢任何帮助。

注意：我只粘贴了选择器，因为我只需要它们。大多数stackoverflow问题都有选择没有特定数据属性的元素的答案。

Answer 1

＆＃13;

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

＆＃13;

p, h1{
background: #ff7f7f;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

请注意兼容性，根据您需要支持的主机，您可能需要更简单的选择器和一些脚本。

E.g。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

获取具有data-some属性的所有元素，但值为"abcd"

的元素除外

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

https://jsfiddle.net/xz5et4tr/

Answer 4

此解决方案是可行的，如果您可以使用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"的元素。

JavaScript - 选择[data-some]属性没有特定值的所有元素

4 个答案: