Using HTML5 Data Attribute in jQuery Selector

Question

Noob Question on Data Attribute

I was wondering will using data-attribute in jQuery Selector can bring any trouble in the future?

I'm trying to reduced the usage of .class and #id as jQuery Selector, since most of data I'm working on will generated from data-attribute

example of the code

$(document).ready(function(){

  var mydata = $(document).data('my-data-attribute');

});

will the code above slowing the load time?

or

$('[data-suffix-attribute="some_value"]').each(function(){
   ......
});

or

$('[data-suffix-attribute="delete"]').click(function(){
   // delete action happening here
});

will this bring trouble?

wont do trouble but selecting IDs is the fastest and most reliant to go. also, dont mix data-attribute and jquery's .data() function — Alex
– Alex, Commented Nov 21, 2013 at 9:17
also, the .data() function in jQuery uses an internal system for storing variables, it just also reads the data- attributes to populate that, so if you were to do this $('#hello').data('hello', 'world'); and then tried to access the data attribute data-hello there wouldn't be a value defined, or if you did define it, that value would not change and jQuery would always use it's internal value after initialization. — Gonçalo Vieira
– Gonçalo Vieira, Commented Nov 21, 2013 at 9:19
Sorry I'm a noob in javascript, but I search on google and the way to grab data attribute is using .data() function, Am I wrong here? — nonsensecreativity
– nonsensecreativity, Commented Nov 21, 2013 at 9:19

pdp2 · Accepted Answer · 2013-11-21 10:32:10Z

1

$(document).ready(function(){

  var mydata = $(document).data('my-data-attribute');

});

The code above will not work. If you want to read the HTML5 data attribute of an element using the jQuery .data() method firstly you need to select the relevant element using a jQuery selector and then you can use the method as is shown below:

var mydata = $('.example').data('suffix');

This will read the value of the data-suffix attribute of an element with a class of "example".

The other important thing to note when using the .data() method is that you have to omit the data- prefix from the selector to read the value stored in that attribute.

The way you have selected the attribute before the .each() method will work:

$('[data-suffix-attribute="some_value"]');

However, it would be better if you can narrow it down to a specific element like:

$('div[data-suffix-attribute="some_value"]');

This is because the first selector will go through every node in the document which will take more time whereas the second will only go through the div tags in the document.

answered Nov 21, 2013 at 10:32

pdp2

1412 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nonsensecreativity Over a year ago

Thanks for the detailed explanation :D, it looks like the best way is to use the narrowed down selector :D

Arun P Johny · Accepted Answer · 2013-11-21 09:19:44Z

0

The attribute selector is supported by the native query selectors so it is fine. As far as future is concerned I don't think in near future it will be a problem.

But it will be better if you can use a element selector attached to the attribute selector like $('div[data-suffix-attribute="delete"]')

If you are very worried about performance it will be a better choice to add a class attribute to the desired elements and then use class selector

answered Nov 21, 2013 at 9:19

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Rohan Kumar · Accepted Answer · 2013-11-21 09:22:53Z

0

It would be better to use id in selector which is fast obviously, If you have multiple data attributes then it is better to use $('[data-suffix-attribute="delete"]').click();. Instead of this you can use the parent selector for your data-attribute elements like,

$('#parentId').on('click','[data-suffix-attribute="delete"]',function(){
   // delete action happening here
});

#parentId contains all data attribute elements

answered Nov 21, 2013 at 9:22

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Collectives™ on Stack Overflow

Using HTML5 Data Attribute in jQuery Selector

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related