How to auto generate id for child div in JQuery. Please help me so can i solve problem.

there is html code i want to set ids for these so can i apply operation on these.

<div id="main">

<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

I want to fit this. when click on + it should be max on plete div and when less it should be again on same possition.

How to auto generate id for child div in JQuery. Please help me so can i solve problem.

there is html code i want to set ids for these so can i apply operation on these.

<div id="main">

<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

I want to fit this. when click on + it should be max on plete div and when less it should be again on same possition.

• javascript
• jquery
• html
• jquery-selectors

• 2 there are many ways for generating IDs. what is the markup and what have you tried? – Ram Commented Jun 15, 2012 at 5:06
• show some markup, and javascript code, you tried? – Shreedhar Commented Jun 15, 2012 at 5:08
• You don't need ids to operate on those divs. What is it that you actually want to achieve? (There might be a better way.) – nnnnnn Commented Jun 15, 2012 at 5:24
• what operationyou're trying to perform on child divs? – thecodeparadox Commented Jun 15, 2012 at 5:28

4 Answers 4

If you try to create new div and assign it to it one possible solution may be:

<div id="parent">

</div>

for(var i = 0; i< 10; i++) { // suppose I append 10 divs to parent
  $('#parent')
        .append('<div id="myid_'+ i +'">child'+ i +'</div>');
}

DEMO

But if you've already child divs within parent then

<div id="parent">
  <div>child 1</div>
  <div>child 2</div>
  <div>child 3</div>
</div>

then one possible approach would be

$('#parent div').each(function(i) {
   $(this).attr('id', 'myid_' + i);
});

According to edit

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

 $('#main .child').each(function(i) {
    $(this).attr('id', 'myid_' + i);
 });

DEMO

Another approach would be

$('#main .child').attr('id', function(i) {
   return 'myid_' + i;
});

DEMO

There is no ways to do it automatically because live() call does not support ready event

This will give the child div's ID like child-1,child-2 etc... child-n

$(function(){

   var childDivs=$("#main div");
   for(var i=0;i<childDivs.length;i++)
   {  
      $(childDivs[i]).attr("id","child-"+i);
   }        

});

Example : http://jsfiddle/nsQcR/12/ (You can check the view source to see the ID's);

To follow on to thecodeparadox's response for creating new div and assigning values, if you'd like the id and other info to be taken from a hash within an array:

arry = [{name: name1, addr: addr1, id: id1}, {name: name2, addr: addr2, id: id2}, etc...]

<div id="parent">
</div>

for(var i = 0, l = arry.length; i < l; i++) {
  var obj = arry[i]
  name = obj.name
  pid = obj.pid
  addr = obj.addr
  $('#parent').append('<div id=' + pid + '>' + name + ': ' + addr + '</div>');
};