How do I get multiple jquery attr values?

Question

My code: http://codepen.io/vincentccw/pen/ecJDG

Basically what I want to get are all the data attribute values from the attr call data-designer

There are suppose to be 4 of them but I can only get the first one using:

  var dsad = $('ul').attr("data-designer");

How do I fix this?

Answer 1

$('ul').each(function(){
    console.log($(this).attr('data-designer'))
    //you can add to an array also  
});

Answer 2

You can use map() to project the attribute values into an array:

var designers = $("ul").map(function() {
    return $(this).attr("data-designer");
}).get();

Answer 3

You can use each() to interact with each element individually:

$('ul').each(function(){
    console.log($(this).data('designer'));
});

Or you can use map() to create an array of all the values which you can deal with separately:

var designers = $('ul').map(function() {
    return $(this).data('designed');
});
console.log(designers);

Note, I used data to get the data-* attributes as this is quicker than accessing the attributes of the DOM element directly.

Answer 4

You need to use .each()

$('ul').each(function(){
   console.log($(this).attr("data-designer"));
});

Codepen Demo

Answer 5

$('ul').attr("data-designer") just got the attribute for the first ul element. If to get all uls with "data-designer" attribute, try this:

 $('ul[data-designer]').each(function(){
      console.log($(this).attr("data-designer"));
 });