CODEWITHSUNDEEP
javascriptjqueryattributes
Vincent Chua
Vincent Chua

Reputation: 1009

How do I get multiple jquery attr values?

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?

Upvotes: 1

Views: 81

Answers (5)

Andrew
Andrew

Reputation: 5340

$('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"));
 });

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 2

Frédéric Hamidi
Frédéric Hamidi

Reputation: 262919

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

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

Upvotes: 2

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

You need to use .each()

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

Codepen Demo

Upvotes: 1

Bhadra
Bhadra

Reputation: 2104

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

Upvotes: 2

Related Questions