CODEWITHSUNDEEP
jqueryhtml
Chris Johnson
Chris Johnson

Reputation: 187

Getting Multiple Data Attributes

A bit difficult to explain....I'm trying to get the attribute of this repeating div. Code below..

<div class="hidden-data">
    <div class="menu-data" data-title="About"></div>
    <div class="menu-data" data-title="Team"></div>
    ETC/ETC/ETC
</div>

Right now I'm calling...

  var data = $(".menu-data").attr("data-title");

and only getting the first one, 'About'. I'd like to find a way to pass each 'data-title' attribute into an array.

Thoughts? I'm kind of stumped here, also having trouble Googling for this one..

Thanks!

Upvotes: 1

Views: 4930

Answers (3)

ferhado
ferhado

Reputation: 2594

you can use eq to get an equal that you want or use each to get each one 

	var data = $(".menu-data").eq(0).data('title');
  console.log('eq(0) : ' + data);
  
  var data = $(".menu-data").eq(1).data('title');
	console.log('eq(1): ' + data);
  
  $(".menu-data").each(function(){
  console.log('each: ' + $(this).data('title'));
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden-data">
    <div class="menu-data" data-title="About"></div>
    <div class="menu-data" data-title="Team"></div>
    ETC/ETC/ETC
</div>

Upvotes: 0

Danny Mcwaves
Danny Mcwaves

Reputation: 179

that's because when you call the data method on the jQuery object, it returns the data for the first element in the nodeList. To get the data for all the div's you have to loop through the elements with the $.each method or use a mapping to retrieve the attributes in a list.

Upvotes: 0

Rex
Rex

Reputation: 521

Jquery 

var array = [];
$(".menu-data").each(function() {
   array.push($(this).attr("data-title"));
});

Js Fiddle

Upvotes: 3

Related Questions