Is there a way in jQuery to select all elements with "data-*" attribute name

Question

Is there a way in jQuery to select all elements with "data-*" attribute name.

<div data-user="1">
    <span data-name="Richard"></span>
    <label></label>
</div>

Like on the sample HTML above I want to select data-user and data-name elements. The problem is "data-" attribute can be anything (like data-abc) that is why I want to select attributes with "data-*". I have looked at all jQuery attribute selector and cant find anything that does what I need. I cant use contains since text inside an element might have data- prefix.

possible duplicate of [Wildcards in jQuery selectors](http://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors) — imtheman, Apr 15 '14 at 23:10
good question, but i think the answer is no (despite all the bogus answers you seem to be getting from folks that don't understand the question) — Stephen Thomas, Apr 15 '14 at 23:12
possible duplicate of [jQuery attribute name contains](http://stackoverflow.com/questions/9543733/jquery-attribute-name-contains) — jmoerdyk, Apr 15 '14 at 23:23
Thanks Stephen. I updated "attribute" to "attribute name" to further clarify the intent of the question. — Richard Heath, Apr 16 '14 at 05:11

adeneo · Accepted Answer · 2014-04-15T23:23:07.980

4

jQuery doesn't really have such a method, other than the attributes selectors you've ruled out.
You'd have to filter or just make your own method, like so :

jQuery.extend(jQuery.expr[':'], { 
    data: function(el) { 
        return !jQuery.isEmptyObject( $(el).data() );
    }    
});

that can be used like

$('*:data')
$('div:data')
$('.class:data')

etc. and returns only the elements that has data associated with it

FIDDLE

edited Apr 15 '14 at 23:23

answered Apr 15 '14 at 23:15

adeneo

312,895
29
395
388

@StephenThomas - So what is the OP asking ? – adeneo Apr 15 '14 at 23:17
"I cant use contains since text inside an element might have data- prefix." – Stephen Thomas Apr 15 '14 at 23:18
@StephenThomas - I thought the question was "Is there a way in jQuery to select all elements with "data-*" attribute.", what the OP can't do isn't very relevant ? – adeneo Apr 15 '14 at 23:19
actually, i think you're right. i retract my comment – Stephen Thomas Apr 15 '14 at 23:19
@StephenThomas - I think I'm right as well, but I'm not sure, that's why I asked ? – adeneo Apr 15 '14 at 23:22
I should note that this doesn't *just* check for data attributes, I wrote this to check for elements with any data set, both data attributes and data set internally by jQuery using data() – adeneo Apr 15 '14 at 23:26
Thank you for clarifying that jQuery does not have that feature. The sample code that you had works perfect. Thanks again. – Richard Heath Apr 16 '14 at 04:58

Malk · Answer 2 · 2014-04-15T23:41:47.783

1

Here is some vanilla HTML5:

Array.prototype.filter.call(
   document.querySelectorAll("body *"), 
   function(node) { 
      return Object.keys(node.dataset).length > 0;
   }
)

And some jQuery:

$("body *").filter(
   function() { 
      return !$.isEmptyObject(this.dataset) 
    }
)

edited Apr 15 '14 at 23:41

answered Apr 15 '14 at 23:28

Malk

11,855
4
33
32

I actually though about using dataset, but then it only works in IE11+. – adeneo Apr 15 '14 at 23:35
Yeah, I jumped on the HTML5 tag. – Malk Apr 15 '14 at 23:36

score 0 · Answer 3 · answered Apr 15 '14 at 23:13

0

See the JQuery API Documentation regarding the Attribute Contains Selector. Thias should get you started.

answered Apr 15 '14 at 23:13

eyoung100

168
9

no. that's not helpful. the link is about attribute values and the OP is asking about attribute names I don't down vote answers but someone else might, so you might want to delete your answer – Stephen Thomas Apr 15 '14 at 23:14

Akinkunle Allen · Answer 4 · 2014-04-15T23:34:49.547

I don't think there's an easy solution to this problem. What I will do is

//Get all the elements in the document and filter those that have data-* attribute

$('*').filter(function() {
   var attrs = this.attributes; //get the attributes array-like object for each DOM element

   for (var i=0, len=attrs.length; i<len; i++) {
     var attr = attrs[i];
     if (attr.name.match(/^data-/)) {
       return true;
     }
  }
});

I tested this and it worked.

score 0 · Answer 5 · answered Apr 15 '14 at 23:35

You could roll through all the DOM elements and find just the ones with data elements...

var i, max, all = document.getElementsByTagName("*");

for ( i=0, max=all.length; i < max; i++ ) {
    // Do something with the element here
    var data = $( all[i] ).data();
    if( !$.isEmptyObject( data ) ){
        //if you find a non-empty object, the element has a data-* attribute, do something with it.
        console.log( data );
    }
}

Is there a way in jQuery to select all elements with "data-*" attribute name

5 Answers5