如何在JQuery中自动为子div生成ID

Question

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 complete div and when less it should be again on same possition.

Answer 1

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 div s 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

Answer 2

无法自动执行此操作，因为live（）调用不支持ready事件

Answer 3

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.net/nsQcR/12/ (You can check the view source to see the ID's);

Answer 4

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>');
};