Changing the ID of all "div" elements (Javascript)

Question

As the title says, I'm trying to change the ID of all elements with the tag "div". Here's my current script, which does not work:

function setIDs() {
    var divs[] = new Array();
    for(i in document.getElementsByTagName('div'))
        divs[i] = document.getElementsByTagName('div')[i];
    for(idNum in divs) divs[idNum].id="child"+idNum;
}

So after setIDs() is finished, my HTML should look like this:

<div id="child0">...</div>
<div id="child1">...</div>
...
<div id="childn">...</div>

Just curious. Why would you want to do that? Also, describe "Does not work" — JohnFx, Jun 19 '12 at 21:35
@user1467611, a nice reference [why you shouldn't use for...in](http://stackoverflow.com/a/500531/417685). — Alexander, Jun 19 '12 at 21:46
@Infotekka: Huh? The "id" attribute is read/write. Which browser quirks on that? — Bergi, Jun 19 '12 at 21:49
Ha, actually nevermind you are right - not sure where I got that from — Infotekka, Jun 19 '12 at 21:59

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

Don't use for...in and reuse document.getElementsByTagName result.

function setIDs() {
  var divs = document.getElementsByTagName('div');
  for(var i=0; i<divs.length; i++) {
    divs[i].id = "child" + i;
  }
}

edited May 23 '17 at 11:49

Community

1
1

answered Jun 19 '12 at 21:37

Alexander

23,432
11
63
73

Thanks I'll use this instead of "for in" – RandomDuck.NET Jun 19 '12 at 21:48

score 0 · Answer 2 · answered Jun 19 '12 at 21:36

0

Invalid JavaScript.

 var divs[] = new Array();

Also, do not use for-in for Array or Array-like iteration. It will often fail.

answered Jun 19 '12 at 21:36

Pretty generalized on the whole 'it will often fail' answer. Could you please elaborate? if I'm iterating over the keys and indexes of an element then I cannot see any reason why `for...in` is not an acceptable method. – Ohgodwhy Jun 19 '12 at 22:02
@Ohgodwhy: `for-in` is for general property enumeration, irrespective of the property and its location in the prototype chain. All enumerable properties will be included in the loop. Running [this example](http://jsfiddle.net/qRuMp/) in Firefox, you'll see more than just `div` elements in the console. Also it does not guarantee a sequential numeric order. Yes, my statement is generalized, and is meant to be. If index iteration is needed, `for-in` is very simply the wrong tool in JavaScript. – Jun 20 '12 at 01:40

score 0 · Answer 3 · answered Jun 19 '12 at 21:39

0

Can you use jQuery? If so, you should try something like this:

var x = 0;
$("div").each(function(){
    $(this).attr("id", "child"+x);
    x++;
});

answered Jun 19 '12 at 21:39

Simon

3,580
2
23
24

that's not even how it should be with jQuery. – Bergi Jun 19 '12 at 21:42
Working yes, but awful. Should be `$("div").attr(function(i){return "child"+i;});` – Bergi Jun 19 '12 at 21:52
Sorry Bergi, your code doesn't work . And the question was tagged 'jQuery', that's why I allowed myself to answer like this. Anyway I'm not here to fight, so sorry if my answer bothered you. – Simon Jun 19 '12 at 21:56
oops, I missed the obvious: `$("div").attr("id", function(i){return "child"+i;})` – Bergi Jun 19 '12 at 22:41
I don't see why this should have a down-vote (although using the index is nicer than an `x++`) so ... +1 – Jun 20 '12 at 04:02

score -1 · Answer 4 · answered Jun 19 '12 at 21:40

function setIDs() {
    var divs[] = new Array();
    // no need for an extra array. Invalid identifier, btw.

    for(i in document.getElementsByTagName('div'))
    // never run through Arrays with for-in-loops. It's the same for NodeLists.

        divs[i] = document.getElementsByTagName('div')[i];
        // you might have cached the NodeList to a variable

    for(idNum in divs) divs[idNum].id="child"+idNum;
    // again, don't use a for-in-loop. And why at all do you need a second loop?
}

corrected:

function setIDs() {
    var divs = document.getElementsByTagName('div');
    for (var i=0; i<divs.length; i++) {
        divs[i].id = "child"+i;
    }
}

Why shouldn't I use "for in" for arrays? It works in all browsers, it appears. — RandomDuck.NET, Jun 19 '12 at 21:42
See [Why use a for loop instead of a for-in loop for arrays?](http://stackoverflow.com/q/6637240/1048572) — Bergi, Jun 19 '12 at 21:47

Changing the ID of all "div" elements (Javascript)

4 Answers4