Getting Multiple Data Attributes

Question

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!

How do you want those attributes to be returned as comma separated? — Rex
– Rex, Commented Sep 27, 2017 at 18:37

Rex · Accepted Answer · 2017-09-27 18:40:48Z

3

Jquery

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

Js Fiddle

answered Sep 27, 2017 at 18:40

Rex

5213 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Johnson Over a year ago

You the man, Rex!! Thanks. Gotta work out my push muscles more!

Danny Mcwaves · Accepted Answer · 2017-09-27 18:42:28Z

0

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.

answered Sep 27, 2017 at 18:42

Danny Mcwaves

1791 silver badge6 bronze badges

Comments

ferhado · Accepted Answer · 2017-09-27 18:49:06Z

0

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>

answered Sep 27, 2017 at 18:49

ferhado

2,6042 gold badges17 silver badges38 bronze badges

Collectives™ on Stack Overflow

Getting Multiple Data Attributes

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related