Question

我正在尝试使用jquery解析div块的列表，并逐个添加id到1,2,3,4,5之类的数字。

例如，以下是div块列表：

<div class="my-blocks">
   <div class="start"></div>
   <div class="start"></div>
   <div class="start"></div>
   <div class="start"></div>
</div>

可以有任何数量的div块，其类为“start”。最终结果必须如下：

<div class="my-blocks">
   <div id="1" class="start"></div>
   <div id="2" class="start"></div>
   <div id="3" class="start"></div>
   <div id="4" class="start"></div>
</div>

我该怎么做？我只是不明白我可以在哪里开始实现这一功能。

Answer 1

你可以这样做：

$('.my-blocks .start').each(function(i) {
    $(this).attr('id', i+1);    
});

另请注意，该号码无效id，您可以使用div-1，div-2代替。

<强> Fiddle Demo

Answer 2

您需要为ID添加字母前缀，因为在html5下面的标准中不能接受将id设置为数值。这样你的代码就可以实现向后兼容。

尝试使用.attr()的接收函数，

$('.my-blocks .start').attr('id', function(i,_) {
   return 'id-' + (i+1);
});

DEMO

Answer 3

您可以使用.each()来迭代子div，然后使用index+1将其设置为id value.try this：

 $('.my-blocks div').each(function(){
   $(this).attr('id',$(this).index()+1);
 });

<强> Working Demo

Answer 4

你必须注意，在html 4之前不允许以数字开头的id。所以如果你不使用html5那么你应该为id添加一些前缀。

尝试each()：

$('div.start').each(function(index, element){
  $(this).attr('id',index+1);
});

Here is working demo.

Answer 5

使用jQuery＆＃39; id＆＃39;属性，遍历每个块：

$(function(){
    $.each($('.start'), function(i,e){
        e.id = i+1;
    });
});

JSFiddle here http://jsfiddle.net/PU2T4/

Answer 6

<强> And one more (DEMO) ：

$('.start').attr('id', function() { return $(this).index()+1; });

Jquery：解析div块并添加id（1,2,3,4,5）

6 个答案:

DEMO