Iterating through data-attributes using jQuery

Question

I'm not getting very far with the following, and am seeking an understanding of the process please.

I have this HTML

<span data-credit-name="Name_1"><strong>1</strong> Name 1</span><br />
<span data-credit-name="Name_2"><strong>2</strong> Name 2</span><br />
<span data-credit-name="Name_3"><strong>1</strong> Name 3</span><br />
<span data-credit-name="Name_4"><strong>1</strong> Name 4</span><br />
<span data-credit-name="Name_5"><strong>3</strong> Name 5</span><br />
<span data-credit-name="Name_6"><strong>1</strong >Name 6</span><br />
<span data-credit-name="Name_7"><strong>4</strong> Name 7</span><br />

What I would like to do is iterate through each span and collect its data-credit-name and the value within the strong tag and create a js object looking like so

var credit = {Name_1:"1", Name_2:"2", Name_3:"3"};

I've tried this to get the first one but get empty string returned:

var credit = $('span[data-credit-name]:first').text();
console.log(credit);

Do you mean var credit = {Name 1:"1", Name 2:"2", Name 3:"1"};? — kmoe
– kmoe, Commented Oct 21, 2014 at 11:20
@Satpal - using spaces is fine. Try it and you'll see ;) var credit = { "Name 1":"1", "Name 2":"2", "Name 3":"1" }; console.log(credit); — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Oct 21, 2014 at 11:23
thanks to everyone who answered, it is much appreciated.I went with @kmoe for her use of the new markup for the example :) — Richlewis
– Richlewis, Commented Oct 21, 2014 at 13:09

Reinstate Monica Cellio · Accepted Answer · 2014-10-21 11:24:48Z

4

This should do the trick...

var credit = {};

$("span[data-credit-name]").each(function() {
    credit[$(this).data("credit-name")] = $(this).find("strong").text();
});

jsfiddle example...

http://jsfiddle.net/t9bthjg4/

answered Oct 21, 2014 at 11:24

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

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

Comments

kmoe · Accepted Answer · 2014-10-21 11:30:49Z

3

To get the data attributes you should use the jQuery .data() method. You can iterate like so:

var credit = {};

$("span[data-credit-name]").each(function(){

   var key = $(this).data("credit-name");

   var value = $(this).find("strong").text();

  credit[key] = value;

});

var credit = {};

$("span").each(function(){
  
   var key = $(this).data("credit-name");
 
  var value = $(this).find("strong").text();
  
  credit[key] = value;

});

console.log(credit);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-credit-name="Name_1"><strong>1</strong> Name 1</span><br />
<span data-credit-name="Name_2"><strong>2</strong> Name 2</span><br />
<span data-credit-name="Name_3"><strong>1</strong> Name 3</span><br />
<span data-credit-name="Name_4"><strong>1</strong> Name 4</span><br />
<span data-credit-name="Name_5"><strong>3</strong> Name 5</span><br />
<span data-credit-name="Name_6"><strong>1</strong >Name 6</span><br />
<span data-credit-name="Name_7"><strong>4</strong> Name 7</span><br />

edited Oct 21, 2014 at 11:30

answered Oct 21, 2014 at 11:25

kmoe

2,0932 gold badges16 silver badges27 bronze badges

2 Comments

Reinstate Monica Cellio Over a year ago

I really need to learn the markup for this site. Shame on me :p

kmoe Over a year ago

It's a pretty new feature :)

Johan · Accepted Answer · 2014-10-21 11:23:58Z

1

You can map the desired values and use get() to unwrap the result from jQuery objects.

On top of my head:

var result = $('span[data-credit-name]').map(function(i, el){

var ret = {},
    $span = $(el),
    creditName = $span.data('credit-name');

    ret[creditName] = ++i; 
    return ret; 

}).get();

console.log(result);

http://jsfiddle.net/5d09bo4c/2/

(Based on your latest HTML change in the question)

answered Oct 21, 2014 at 11:23

Johan

35.4k62 gold badges191 silver badges309 bronze badges

Comments

Andy · Accepted Answer · 2014-10-21 11:24:17Z

1

var out = {};
$.each($('span'), function (i, el) {
  var $this = $(this);
  var strong = $this.find('strong').html();
  var data = $this.data('credit-name');
  out[data] = strong;
});

DEMO

answered Oct 21, 2014 at 11:24

Andy

63.7k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

Iterating through data-attributes using jQuery

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related