generating dynamic div id using jquery ajax

Question

I want to assign unique id into HTML DIV dynamically created by jquery Ajax.

$.ajax({
        type: 'xxx',
        data: 'xxx',
        url: 'xxx',
        success: function(data) {

                var repeatID =1;

                $.each(data.data, function(i, v){

                    repeatID++;

                    //alert(repeatID);

                    $("#divId").append('<div class="single" id="my_test_' + repeatID + '">'
                                                    +'<div class="any_name"> '+ v.Name +' </div></div>');
                });
        error:...
});

I need to assign a unique id into class 'single'. Inside the each loop, repeatID is increasing outside append (like if I uncomment alert and there are 3 arrays returned by server then it will give alert message for three times.). But inside append it is not increasing. All the values remain the initially assigined value, 1. So, for the three DIV I got id 'my_test_1'.

I am expecting to get 'my_test_1', 'my_test_2', 'my_test_3' if there are 3 arrays. Where I am doing the wrong?

Any solution please?

repeatID should be initiated outside the ajax method.

Nish
– Nish

2013-04-24 07:21:24 +00:00
Commented Apr 24, 2013 at 7:21 — Nish
– Nish, Commented Apr 24, 2013 at 7:21
Are you sure? It works for me: jsfiddle.net/SdyYk

Blender
– Blender

2013-04-24 07:25:27 +00:00
Commented Apr 24, 2013 at 7:25 — Blender
– Blender, Commented Apr 24, 2013 at 7:25

Jace · Accepted Answer · 2013-04-24 07:33:52Z

2

You can just use the index parameter (in your case, i) as the counter. You don't need repeatID as the callback parameter in the each function comes with the functionality you desire.

$.each(data.data, function(i, v){
    $("#divId").append('<div class="single" id="my_test_' + (i+1) + '">'
                          +'<div class="any_name"> '+ v.Name +' </div></div>');
}

I've used (i+1) as you seem to want it to be 1-based.

Fiddle:
http://jsfiddle.net/3wFE4/

More info on jQuery each:
http://api.jquery.com/jQuery.each/

jQuery.each( collection, callback(indexInArray, valueOfElement) )

edited Apr 24, 2013 at 7:33

answered Apr 24, 2013 at 7:26

Jace

3,0722 gold badges24 silver badges34 bronze badges

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

3 Comments

Mehdi Over a year ago

Hi, Jace. Thanks for your reply. But I am getting the same problem. for all the DIVs the name is 'my_test_1'. But if I make a alert before append 'alert(i);', it will make a 3 times alert 0, 1, 3! I do not understand why does 'i' not increasing inside 'append'....?

Jace Over a year ago

@Cart that's pretty much impossible, there's something else at play. Can you please share with me all the code in your each function?

Mehdi Over a year ago

Actually I am working on Phonegap. The process (you have provided) is working fine in web. The process is not working in phonegap. Thanks a lot for your help.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You can try putting the increment after the append():

var repeatID =1;
$.each(data.data, function(i, v){
  $("#divId").append('<div class="single" id="my_test_' + repeatID + '">'+
   '<div class="any_name"> '+ v.Name +' </div></div>');
   repeatID++;
});

Don't know about your issues but the second one is working absolutely fine for me.

If you want to see this in a demo fiddle here

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 24, 2013 at 7:27

Jai

74.8k12 gold badges77 silver badges104 bronze badges

3 Comments

Mehdi Over a year ago

Already I have tried both, but not working inside 'APPEND'. outside append everything works fine. Many thanks for your reply.

Jai Over a year ago

@Cart added a fiddle might be helpful for you. Worked for me

Mehdi Over a year ago

Actually I am working on Phonegap. like Jase, also your process is working fine in web. The process is not working in phonegap. Thanks a lot for your help.

Collectives™ on Stack Overflow

generating dynamic div id using jquery ajax

2 Answers 2

3 Comments

If you want to see this in a demo fiddle here

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related