How to get data attribute values from multiple class

Question

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 accomplished by using loop, but I'm not really sure.

/* JS */

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

<script src="https://ajax.googleapis.com/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.

maybe you should get data from each element $( ".test" ).each(function( index ) { console.log( data + ": " + $( this ).data("val") ); }); — Anas EL KORCHI, Apr 03 '15 at 09:38
possible duplicate of [Using jQuery to get data attribute values with .each()](http://stackoverflow.com/questions/21307137/using-jquery-to-get-data-attribute-values-with-each) — Luca Davanzo, Apr 03 '15 at 09: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, Apr 03 '15 at 09:51
your question is already answer in many post. You simply should search before asking. — Luca Davanzo, Apr 03 '15 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, Apr 05 '15 at 06:40

score 7 · Accepted Answer · answered Apr 03 '15 at 09:37

7

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.com/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>

answered Apr 03 '15 at 09:37

mohamedrias

18,326
2
38
47

Not sure what will I accept. Almost the same with @Akskay. – Adrian Enriquez Apr 03 '15 at 09:42
I modified it for performance reason. @Akskay is appending it in each iteration. I was first to answer ;) – mohamedrias Apr 03 '15 at 09:42

score 3 · Answer 2 · answered Apr 03 '15 at 09:38

How about this

/* JS */

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

<script src="https://ajax.googleapis.com/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>

David Kmenta · Answer 3 · 2015-04-03T09:44:50.260

1

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(', '));

edited Apr 03 '15 at 09:44

answered Apr 03 '15 at 09:38

David Kmenta

820
6
15

How to get data attribute values from multiple class

3 Answers3