How will I be able to get all the values of data-val by only using class not id? I can only get the first one. I think this can be acplished by using loop, but I'm not really sure.

/* JS */

var dataValue = $('.test').data('val');
$('#result').append('Result: ' + dataValue);

<script src=".1.1/jquery.min.js"></script>

<!-- HTML -->
<div data-val="1" class="test"></div>
<div data-val="2" class="test"></div>
<div data-val="3" class="test"></div>

<div id="result"></div>

How will I be able to get all the values of data-val by only using class not id? I can only get the first one. I think this can be acplished by using loop, but I'm not really sure.

/* JS */

var dataValue = $('.test').data('val');
$('#result').append('Result: ' + dataValue);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<div data-val="1" class="test"></div>
<div data-val="2" class="test"></div>
<div data-val="3" class="test"></div>

<div id="result"></div>

Not a duplicate of Using jQuery to get data attribute values with .each() because I'm not asking HOW to use .each() I'm asking WHAT to use and there is no each() function in the original post.

• javascript
• jquery
• html

• 1 maybe you should get data from each element $( ".test" ).each(function( index ) { console.log( data + ": " + $( this ).data("val") ); }); – Anas EL KORCHI Commented Apr 3, 2015 at 9:38
• possible duplicate of Using jQuery to get data attribute values with .each() – Luca Davanzo Commented Apr 3, 2015 at 9:45
• @Velthune I think this is not a duplicate because In my original post there is no .each() function and I'm not sure what function will I use. If I know .each() before then I shouldn't asked this question in the first place. – Adrian Enriquez Commented Apr 3, 2015 at 9:51
• your question is already answer in many post. You simply should search before asking. – Luca Davanzo Commented Apr 3, 2015 at 15:08
• @Velthune I know how to search. But it's not easy to search if you don't know the exact string. Don't want to argue with toxic people just do what you like. – Adrian Enriquez Commented Apr 5, 2015 at 6:40

3 Answers 3

You need to iterate over the list to get:

Instead of modifying the DOM on each iteration, append it a string/array and then add it to the dom:

var array = [];
$(".test").each(function() {
    array.push($(this).data("val"));
});
$("#result").append("Results "+array.join(","))

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<div data-val="1" class="test"></div>
<div data-val="2" class="test"></div>
<div data-val="3" class="test"></div>

<div id="result"></div>

How about this

/* JS */

 $('.test').each(function(){
 var dataValue = $(this).data('val');
   $('#result').append(dataValue);
  })

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<div data-val="1" class="test"></div>
<div data-val="2" class="test"></div>
<div data-val="3" class="test"></div>

<div id="result"></div>

It's not clear what do you want as a result. Counted values or values separated by something? This case gets every value into the array.

var result = [];
$(".test").each(function() {
    result.push($(this).data("val"));
});

$('#result').append('Result: ' + result.join(', '));