Increment attribute value (int) for each element using jquery

Question

i have an unknown number of section elements:

<section id="foo">
...
</section>

<section id="bar">
...
</section>

For each section which is present I need to add an attribute "data-serial" which is an integer starting at 0 and being incremented by 1 for each section present, for example the above would turn into:

<section id="foo" data-serial="0">
...
</section>

<section id="bar" data-serial="1">
...
</section>

<section id="bla" data-serial="2">
...
</section>
...

How can I achieve this using jQuery?

Thanks

James Allardice · Accepted Answer · 2011-08-09 13:16:08Z

17

var current = 0;
$("section").each(function() {
   $(this).data("serial", current);
   current++;
});

This loops through all section elements in the document, and attaches the value of current to each element using the jQuery data method.

answered Aug 9, 2011 at 13:16

James Allardice

166k22 gold badges335 silver badges315 bronze badges

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

Comments

Chris · Accepted Answer · 2011-08-09 13:20:46Z

12

A modified version of James Allardice's answer taking advantage of the rarely used parameters that each passes to the function it is given. The first parameter is the index of the current iteration of the loop.

http://api.jquery.com/each/

$("section").each(function(index) {
   $(this).attr("data-serial", index);
});

answered Aug 9, 2011 at 13:20

Chris

27.7k7 gold badges77 silver badges94 bronze badges

4 Comments

Chris Over a year ago

Everybody always forgets those poor little parameters. Nice to actually see a use for it for a change. ;-)

James Allardice Over a year ago

Yeah, the wonders of jQuery, making everything even easier than you think at first!

maze Over a year ago

for some reason this doesnt work. it seems the index value is not set for the data-serial attribute

Chris Over a year ago

@maze: weird. I created a fiddle (jsfiddle.net/chrisvenus/3FbWN) and when I use firebug to examine the generated html the attributes are showing up... Though having just seen the accepted answer that isn't setting the data-serial attribute but updating an internal data element. I assume this is what you in fact wanted?

MikeM · Accepted Answer · 2011-08-09 13:17:04Z

1

something like

var i = 0;
$('section').each(function() {
    $(this).data('serial', i++);
});

answered Aug 9, 2011 at 13:17

MikeM

27.5k4 gold badges67 silver badges80 bronze badges

Comments

Tim Rogers · Accepted Answer · 2011-08-09 13:19:30Z

1

$("section").each(function(i, e) { $(e).attr("data-serial", i) });

answered Aug 9, 2011 at 13:19

Tim Rogers

21.8k8 gold badges55 silver badges69 bronze badges

Collectives™ on Stack Overflow

Increment attribute value (int) for each element using jquery

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related