Adding a new element with increasing id-number

Question

I try to append a new element with an increasing id. This is my attempt, but it always sets the id 1:

JSFiddle: http://jsfiddle.net/z0qwcuq9/

<div id="main"></div>

for (i = 0; i < 5; i++) { 
    var maxId = 0;
    $("#main .element *[id]").each(function() {
        if(maxId < $(this).attr("id")){ maxId = $(this).attr("id")}
    });
    maxId = maxId + 1;
    $('#main').append('<div class="element" id="'+maxId+'">');
}

By the way: Is this the correct way to append an element or do I have to set the class and id seperatly?

http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html seems you're trying to assign numerical id to elements or the '+' behaving as string concatenation operator is intentional? — Ejaz, Apr 13 '15 at 14:48

Milind Anantwar · Answer 1 · 2015-04-13T14:50:43.010

3

You are resetting the value inside each iteration of for loop. set the variable outside for loop and rest should work fine:

var maxId = 0;
for (i = 0; i < 5; i++) { 
   //rest code
}

Working Demo

edited Apr 13 '15 at 14:50

answered Apr 13 '15 at 14:43

Milind Anantwar

81,290
25
94
125

score 0 · Accepted Answer · edited Apr 13 '15 at 19:06

0

Because you make the maxId in the for-loop. This should work:

var maxId = 0;
for (i = 0; i < 5; i++) { 
    var id = $(this).attr("id");
    $("#main .element *[id]").each(function() {
        if(maxId < id) maxId = id;
    });
    maxId = maxId + 1;
    $('#main').append('<div class="element" id="'+maxId+'">');
}

edited Apr 13 '15 at 19:06

user3142695

15,844
47
176
332

answered Apr 13 '15 at 14:43

Ceesz

86
1
1
10

Adding a new element with increasing id-number

2 Answers2