Categories
JavaScript Answers

How to get data attribute value of all elements with jQuery?

Spread the love

Sometimes, we want to get data attribute value of all elements with jQuery.

In this article, we’ll look at how to get data attribute value of all elements with jQuery.

How to get data attribute value of all elements with jQuery?

To get data attribute value of all elements with jQuery, we can call the each method on the select element list object.

Then we call data on each element to get the data attribute value.

For instance, we write:

<ul>
  <li class="myClass" data-option-id="2"></li>
  <li class="myClass" data-option-id="15"></li>
  <li class="myClass" data-option-id="27"></li>
</ul>

to add li elements in a ul element.

Then we write:

$('.myClass').each(function() {
  console.log($(this).data('option-id'));
});

to select all elements with class myClass.

Then we call each with a callback to get all the data-option-id attribute values.

We get the value with the data method with 'option-id' as the argument.

As a result, we see 2, 15, and 27 are logged.

Conclusion

To get data attribute value of all elements with jQuery, we can call the each method on the select element list object.

Then we call data on each element to get the data attribute value.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *