How to generate different ids using jquery for same class elements

Question

Am having two divs with same class name so when am attaching an element by creating id for both the divs, am getting the element id name as same for both the elements in both divs.

Example:

<div class="nav">
    <div class="example" id="example_1">
    </div>
</div>
<div class="nav">
    <div class="example" id="example_2">
    </div>
</div>

and I have used jquery syntax as

 $(".nav").append(example)

where example_i increments.

How can I make different ids using jquery?

guradio · Accepted Answer · 2016-06-02 07:49:49Z

2

$('.nav').each(function(i,v){


$(this).append('<div id=example_'+i+'>example_'+i+'</div>')//use index of each .nav index starts at zero so if you need to start at 1 add 1 to index

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">

</div>
<div class="nav">

</div>

answered Jun 2, 2016 at 7:49

guradio

15.6k4 gold badges39 silver badges65 bronze badges

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

Comments

rrk · Accepted Answer · 2016-06-02 07:56:10Z

1

You can use something like this if you are not adding simple html strings. First make example a jQuery object, if it is not one already. Then you can easily manipulate the attributes.

var $example = $(example),
    idPre = 'example_',
    count = 1;
$(".nav").each(function() {
    $(this).append($example.clone().attr('id', idPre + count));
    count++;
})

edited Jun 2, 2016 at 7:56

answered Jun 2, 2016 at 7:49

rrk

15.9k4 gold badges32 silver badges49 bronze badges

Comments

Rhumborl · Accepted Answer · 2016-06-02 07:55:03Z

0

A simplification of guradio's answer, append() can also take a function which returns the element based on the current index. This avoids the extra each() loop and recreating $(this).

$('.nav').append(function(i,v){

    //use index of each .nav index starts at zero so if you need to start at 1 add 1 to index
    return $('<div id=example_'+i+'>example_'+i+'</div>');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">

</div>
<div class="nav">

</div>

answered Jun 2, 2016 at 7:55

Rhumborl

16.7k4 gold badges42 silver badges47 bronze badges

Comments

Qamar Ul Din Hamza · Accepted Answer · 2018-11-06 21:05:51Z

0

This is the authentic answer, I tested it myself. You can use something like this if you are not adding simple html strings. First make the example a jQuery object, if it is not one already. Then you can easily manipulate the attributes.

var $example = $(example),
    idPre = 'example_',
    count = 1;
$(".nav").each(function() {
    $(this).append($example.clone().attr('id', idPre + count));
    count++;
});

answered Nov 6, 2018 at 21:05

Qamar Ul Din Hamza

11 bronze badge

Collectives™ on Stack Overflow

How to generate different ids using jquery for same class elements

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related