javascript - 在 javascript 中查找所有没有 data- 属性的元素

Question

我需要找到 $('.post-content') 中没有数据属性的所有元素。我试着说类似 if (!$('.post-content p').attr('data-example')) { ... }

但显然那是行不通的。那么我将如何执行以下操作:

找到所有属于 .post-content 但没有数据属性的 p 标签并将其删除。

我认为它非常简单，但是所有的堆栈问题和文档，以及 jquery 和互联网只有“如何添加、如何查找、如何添加值 - 到数据属性”

所以我不是很清楚，我很抱歉。在示例中:

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

我不想删除嵌套的 p 标签，就像您在此处看到的那样，在具有数据属性的 p 标签下有一个嵌套的 p 标签。只是没有数据属性的顶级 p 标签。

提供的解决方案倾向于删除嵌套和顶层。

Answer 1

没有特定的数据属性

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

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

没有任何数据属性

A.: 您可以检查元素的 dataset 中是否有任何内容使用 Object.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" rel="noreferrer noopener nofollow">keys()</a> ( fiddle ):

$(".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 may not be available .}

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.<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some" rel="noreferrer noopener nofollow">some()</a>}