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

Question

I need to find all elements in $('.post-content') that do not have data attributes. I tried to say something like if (!$('.post-content p').attr('data-example')) { ... }

But obviously that does not work. So how would I do the following:

Find all p tags that belong to .post-content who do NOT have a data-attribute and remove them.

I think its very straight forward, but all the stack questions and docs, and jquery and the internet just has "how to add, how to find, how to add a value - to the data attribute"

So I was not completely clear, my apologies. In the example:

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

I do not want nested p tags, like the one you see here, where there is a nested p tag under the p tag that has a data attribute, to be removed. Just top level p tags that do not have a data attribute.

The solutions provided tend to remove nested and top level.

Answer 1

您可以使用.not（）和has属性选择器

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

Answer 2

Not having a particular data attribute

You can use a combination of the :not() and [attribute] selectors ( fiddle ):

$(".post-content p").remove();

Not having any data attributes

A.: You could check if there's anything in the element's dataset using Object. keys() Object. keys() ( fiddle ):

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

... or you could use for...in :

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

_{Note: Depending upon the browsers you need to support, dataset may not be available .}

B.: You could simply iterate over the element's attributes ( fiddle ):

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

_{See also: filter() and Array.prototype. some() Array.prototype. some()}

Answer 3

Do you mean a specific data attribute, or just any data attribute (eg data-a, data-b, ... data-z, data-aa, data-ab, ...)?

If you mean a specific attribute then something like this should work:

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

But if you mean ANY data attribute, that's a whole 'nother thing. You'd have to find all the potential elements, then enumerate each of their attribute collections (eg $foo[0].attributes) to see if any of their names start with "data-". If you have to do that I hope you don't have a lot of elements, it won't be very fast. Perhaps you could explain what the problem you're trying to solve is as there may be a better way to do it than this. Such as keeping a known specific attribute on those elements.

Answer 4

You can either use the .dataset property (only works in newer browers) or you can use the .attributes property and look for attributes that start with "data-" .

Here's a version that use the attributes list and will work in a wide range of browsers (doesn't require support for .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();

Your question wasn't entirely clear on one point. This code examines all descendants of .post-content . If you wanted to narrow it to only certain types of objects in that hierarchy, you can change the initial selector to narrow it.