查找所有没有data属性的JavaScript元素

Question

我需要找到所有没有数据属性的 $('.post-content') 元素。我尝试写了类似这样的代码：if (!$('.post-content p').attr('data-example')) { ... }，但显然这是不起作用的。那么我应该如何实现以下操作：查找所有属于 .post-content 的 p 标签，它们没有 data 属性，然后将它们删除。 我认为这很简单明了，但是所有的堆栈问题、文档、jquery 和互联网上都只有“如何添加、如何查找、如何向数据属性添加值”的内容。所以我并不完全清楚。对此我表示歉意。在这个例子中：

<div class="post-content">
  <p data-attribute="foo">
    <span data-attribute="boo">
     <p>...</p>
    </span>
  </p>
  <p> ... </p>
</div>

我不希望像您在这里看到的嵌套的p标签被删除，其中在具有数据属性的p标签下有一个嵌套的p标签。只需删除没有数据属性的顶级p标签。

提供的解决方案往往会删除嵌套和顶级标签。

- SeekingTruth

Answer 1

没有特定的数据属性

您可以使用 :not() 和 [attribute] 选择器的组合 (fiddle):

$(".post-content p:not([data-something])").remove();

没有任何数据属性

A.: 你可以使用Object.keys()检查元素的dataset是否有任何内容（示例）：

$(".post-content p").filter(function(){
   return Object.keys(this.dataset).length === 0;
}).remove();

…或者您可以使用for...in：

$(".post-content p").filter(function(){
   for (var prop in this.dataset) {
       return false;
   }
   return true;
}).remove();

_{注：根据您需要支持的浏览器，dataset 可能不可用。}

B.：您可以简单地遍历元素的attributes（fiddle）：

$(".post-content p").filter(function(){
    return ![].some.call(this.attributes, function(attr){
        return /^data-/i.test(attr.name);
    });
}).remove();

_{参见：filter()和Array.prototype.some()}

- canon

Answer 2

你可以使用.not()和有属性选择器。

$('.post-content p').not('[data-example]')

- Arun P Johny

Answer 3

你是指特定的数据属性，还是任何数据属性（例如data-a，data-b，... data-z，data-aa，data-ab，...）？

如果你是指特定属性，那么这样做应该可以：

$(".post-content p:not([data-example]").remove()

但是，如果您指的是任何数据属性，那就是另一回事了。您必须找到所有潜在的元素，然后枚举它们的每个属性集合（例如 $foo[0].attributes），以查看它们的名称是否以“data-”开头。如果您必须这样做，我希望您没有很多元素，否则速度会很慢。也许您可以解释一下您要解决的问题，因为可能有比这更好的方法来解决它。例如，在这些元素上保留已知的特定属性。

- InfinitiesLoop

Answer 4

你可以使用.dataset属性（只适用于较新的浏览器），或者你可以使用.attributes属性并查找以"data-"开头的属性。

这是一个使用attributes列表的版本，适用于各种浏览器（不需要支持.dataset）：

$(".post-content").find("*").filter(function() {
    var attrs = this.attributes;
    regex = /^data-/;
    for (var i = 0; i < attrs; i++) {
        if (regex.test(attrs[i].name)) {
            // found a "data-xxxx" attribute so return false to avoid this element
            return false;
        }
    }
    // did not find any "data-xxxx" attributes so return true to include this element
    return true;
}).remove();

您的问题在一个方面上并不十分清晰。这段代码检查所有.post-content的后代。如果您想将其缩小到该层次结构中仅限于某些类型的对象，可以更改初始选择器以缩小范围。

- jfriend00