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

【问题标题】：How to auto generate id for child div in JQuery如何在 JQuery 中为子 div 自动生成 id
【发布时间】：2015-11-03 18:46:28
【问题描述】：

如何在 JQuery 中为子 div 自动生成 id。请帮助我，我可以解决问题。

我想为这些设置 id 的 html 代码，所以我可以对这些应用操作。

<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 上的最大值，而当点击更少时，它应该再次位于相同的位置。

【问题讨论】：

生成 ID 的方法有很多种。标记是什么，您尝试过什么？
显示一些标记和javascript代码，你试过了吗？
您不需要 id 来操作这些 div。你真正想要达到的目标是什么？（可能有更好的方法。）
operationyou 试图对子 div 执行什么操作？

标签： javascript jquery html jquery-selectors

【解决方案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

但是，如果您已经在父级中拥有divs 的孩子，那么

<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

【讨论】：

@Pulkit 我需要一些时间，请稍候
@Pulkit 检查这个jsfiddle.net/QStkd/238.. 在这里我试图给你一个例子而不生成随机的ids，你必须改变CSS和其他一些你所期望的
如果有多个 div，它们将如何自动适应主 div。以及如何在孩子最大化时隐藏子 div。

【解决方案2】：

没有办法自动完成，因为 live() 调用不支持 ready 事件

【讨论】：

【解决方案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）；

【讨论】：

【解决方案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>');
};

【讨论】：