Question

How can I take all data-id from the following line of code

HTML:

<div data-id='1' class="userId">
    <span> user name-1 </span>
</div>
<div data-id='2' class="userId">
    <span>user name-2</span>
</div>

javascript:

var userIds = $('.userId').attr("data-id");

But it returns only 1

Answer 1

var userIds = $('.userId').map(function(){
    return $(this).data('id');
}).get();

How does it work?

it grabs all the userId class elements, then it will execute a function(with map) that will return the data-id attribute using data and then get the results with `get.

Why doesn’t your code work?

var userIds = $('.userId').attr("data-id");

attr works only on the first matched element in the set, so it returns only the first element id- 1.

attr: Get the value of an attribute for the first element in the set of matched elements…