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

Question

如何在JQuery中为子div自动生成id。请帮助我，这样我就能解决问题。

有html代码我想为这些设置ID，所以我可以对这些进行操作。

<div id="main">

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

我想要适合这个。点击+时，它应该是完整div上的最大值，当它更少时，它应该再次出现在相同的位置上。

Answer 1

如果您尝试创建新div并将其分配给它，可能的解决方案可能是：

<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

但是，如果您已经在父母内部div，那么

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

然后一种可能的方法是

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

根据编辑

<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

另一种方法是

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

<强> DEMO

Answer 2

没有办法自动执行此操作，因为 live（）调用不支持就绪事件

Answer 3

这会给孩子div的ID像child-1，child-2等... child-n

$(function(){

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

});

示例：http://jsfiddle.net/nsQcR/12/ （您可以查看视图来源以查看ID）;

Answer 4

如果您想要从数组中的哈希中获取id和其他信息，请继续执行codeparadox对创建新div和分配值的响应：

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