Assign Id's dynamically to DOM elements with javascript

Question

I just have a quick question about how to generate id's on-the-fly for HTML elements. So far I've tried a few things, I started with a "for" loop, I already know how many elements I have to generate Id's for, in this case I have an "ul" with 6 "li". My "for" loop is as follows:

var items = $("ul li").length;
for(var i = 0; i <= items; i++){
    $("ul li").attr("id", "number" + i);
}

"number" would be the new id concatenated with "i", so I get a different Id for each "li". As you can probably tell, this does not work, because I end up with the same Id for each "li":

in this case I get <li id="number6">... </li> for all the "li" elments in the "ul". I tried a "while" loop and ".each()" with jQuery but I get the exact same thing.

Any help would be appreciated.

There is no reason why you should end up with the same id for each. There are no deferred functions or closures that would cause the same variable to be used as "number" + i is evaluated on each iteration. — Sean Kinsey
– Sean Kinsey, Commented May 26, 2010 at 21:04
I actually was not expecting this to trick me like it did, but for some reason it was not working. It is now thanks to a different approach provided by Nick Craver(below). Thanks — jnkrois
– jnkrois, Commented May 26, 2010 at 21:10
@Sean .attr("id", value); sets it for each of the matched elements, like every other action. It was setting it for every <li> every time, e.g. all were set to number0, then all were set to number1, etc. Just needed to use this instead of selecting and setting all elements each loop...what he had was the expected result, just not right intended one. — Nick Craver
– Nick Craver, Commented May 26, 2010 at 21:36
@Nick - Thanks again nick, I suspected that was the problem, but then again your advice help me figure it out. — jnkrois
– jnkrois, Commented May 26, 2010 at 22:31

Nick Craver · Accepted Answer · 2010-05-26 20:53:03Z

8

You can do this easier using a .each() (use this inside, not the selector again!), like this:

$("ul li").each(function(i) {
  $(this).attr("id", "number" + i);
});

The function in the .each() gets the index and element as a parameter, so you can just use that i to assign the ID starting at 0 like you have currently.

Or, alternatively, you can pass a similar function to .attr(), like this:

$("ul li").attr('id', function(i) {
  return "number" + i;
});

answered May 26, 2010 at 20:53

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

1 Comment

jnkrois Over a year ago

Thanks, the "each" method works perfectly as you point out, it did not work for me before, but I must have been doing something wrong, Thanks a lot

Ryan McGrath · Accepted Answer · 2010-05-26 21:37:05Z

1

Your code is pretty off, and I just want to note this in case anyone comes to this thread looking for a similar answer.

var items = $("ul li").length;
for(var i = 0; i <= items; i++){
    $("ul li").attr("id", "number" + i);
}

In your for loop, you're grabbing every "ul li" again on each iteration, and setting the ID's of all of them to be a specific ID. What you actually wanted was the .each() method, to iterate through all of them:

$("ul li").each(function(i) {
    $(this).attr("id", "number" + i);
});

answered May 26, 2010 at 21:37

Ryan McGrath

2,0421 gold badge14 silver badges23 bronze badges

Collectives™ on Stack Overflow

Assign Id's dynamically to DOM elements with javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related