Adding unique class name to dynamically created elements/ JS / jQuery

Question

If I have ten divs created dynamically, each one given the class name 'createdDiv' on creation. How can I iterate through them after they are created and add a unique class name to each?

Somthing like,

for each('.createdDiv'){
    var count = 1;
        this.addClass('uniqueName' + count);
        count ++;
}

So I would like to end up with 10 divs as follows,

('.createdDiv .uniqueName1')
('.createdDiv .uniqueName2')
('.createdDiv .uniqueName3')
('.createdDiv .uniqueName4')

and so on...

Because I'm asking to do it after creation.

Daft
– Daft

2014-01-31 17:47:39 +00:00
Commented Jan 31, 2014 at 17:47 — Daft
– Daft, Commented Jan 31, 2014 at 17:47

j08691 · Accepted Answer · 2014-01-31 18:00:51Z

3

$('.createdDiv').each(function(i){
    $(this).addClass('uniqueName' + i);
});

edited Jan 31, 2014 at 18:00

answered Jan 31, 2014 at 17:46

j08691

208k33 gold badges269 silver badges281 bronze badges

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

2 Comments

Daft Over a year ago

Perfect. Much appreciated! I'll accept the answer 'in 4 minutes'. Cheers!

Roko C. Buljan Over a year ago

you're missing an );

Arun P Johny · Accepted Answer · 2014-01-31 17:46:48Z

1

Try

$('.createdDiv').addClass(function (i) {
    return 'uniqueName' + (i + 1)
})

Demo: Fiddle

answered Jan 31, 2014 at 17:46

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

2 Comments

j08691 Over a year ago

Same question I asked Roko, why add one to the index?

Arun P Johny Over a year ago

@j08691 just because OPs index started from 1

Roko C. Buljan · Accepted Answer · 2014-01-31 17:52:17Z

1

$('.createDiv').each(function(i){
    $(this).addClass('uniqueName'+ (i+1));
});

edited Jan 31, 2014 at 17:52

answered Jan 31, 2014 at 17:46

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

4 Comments

j08691 Over a year ago

Just curious, why add one to the index?

Roko C. Buljan Over a year ago

@j08691 cause index is 0 based, now take a look at the example in question... thought was correct

j08691 Over a year ago

I'm not saying you're wrong, I just didn't know if there was any reason for doing it, other than to mimic the numbering in the question.

Roko C. Buljan Over a year ago

@j08691 well if he's adding numbered classes than I suppose it matters... but yes, '0' is also a number :D

Oli414 · Accepted Answer · 2016-06-28 16:27:38Z

0

This is not exactly what you're asking for, but another way to later access a list of generated elements would be to use the data attribute:

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

Then to select an element based on it's index:

$(".createDiv[data-index='" + i + "']")

Demo: Fiddle

answered Jun 28, 2016 at 16:27

Oli414

3564 silver badges12 bronze badges

Collectives™ on Stack Overflow

Adding unique class name to dynamically created elements/ JS / jQuery

4 Answers 4

2 Comments

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related