How to get data attribute value of all elements using jquery?

Question

How to get data attribute value of all elements using jquery without $.each?

<li class="myclass" data-optionid="2"></li>
<li class="myclass" data-optionid="15"></li>
<li class="myclass" data-optionid="27"></li>

The result should be: 2, 15, 17

I tried $('.myclass').data('optionid') but the result was 2

Thanks in advance.

Answer 1

$('.myclass') will select all the elements having the class myclass, but when used .data() on it will return the data-attribute value of the first element in the matched set, thus returning 2.

As there are multiple elements having the data-attribute, you'll need to iterate over them using $.each

$('.myclass').each(function() {     console.log($(this).data('optionid')); }); 

$('.myclass').each(function() {      console.log($(this).data('optionid'));  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>  <li class="myclass" data-optionid="2"></li>  <li class="myclass" data-optionid="15"></li>  <li class="myclass" data-optionid="27"></li>

If you want to get the result as array, use $.map and $.get

var data = $('.myclass').map(function() {     return $(this).data('optionid'); }).get(); 

var data = $('.myclass').map(function() {      return $(this).data('optionid');  }).get();  console.log(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>  <li class="myclass" data-optionid="2"></li>  <li class="myclass" data-optionid="15"></li>  <li class="myclass" data-optionid="27"></li>

Answer 2

Please try this

$(".myclass").each(function(){    alert($(this).attr("data-optionid"));    });

Answer 3

I'm not sure if you noticed the small typo but first close the opening <li> tags.

<li class="myclass" data-optionid="2"></li>
<li class="myclass" data-optionid="15"></li>
<li class="myclass" data-optionid="27"></li>

The with the jQuery code you don't have to do a $.each can just because jQuery does that in the initial element selector. So if you do a .prop on the selector to get the data-optionid then you will get the value.

$(".myclass").attr("data-optionid");

On of the flexible thins about HTML is that you can create your own attributes to use in other parts of our code. If the browser doesn't recognize it then it gets ignored.