Question

我通过jquery动态生成元素，并为每个元素创建动态id。现在我还提供了通过删除按钮删除特定元素的功能。在那种情况下，我对该给定元素的id也会被删除。现在我必须重新分配所有id，以便所有id都按顺序排列。

EG。假设我通过jquery

动态生成4个div

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>

现在我删除了第二个

<div id="box1"></div>
<div id="box3"></div>
<div id="box4"></div>

我的身份证现在是方框1，方框3，方框4

但我希望它们是box1，box2和box 3

Answer 1

每次删除框

时尝试此操作

var $boxes = $('[id^="box"]');
for (var i = 0; i < $boxes.length; i++) {
    $boxes.eq(i).prop('id', 'box' + (i + 1));
}

或用div包装你的盒子并执行此操作

$('[id^="box"]').attr('id', function () {
    return "box" + ($(this).index() + 1);
});

DEMO

Answer 2

做这样的事情，对所有div都有一个共同的类

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

每次删除一个div，并开始运行此功能;

var reassignIds = function(){
    $('.box').each(function(index){
        $(this).attr('id', 'box'+(index+1));
    });
}

这里是jsfiddle http://jsfiddle.net/ravikumaranantha/bjBSs/1/

Answer 3

如果你必须使用顺序ID，那么最简洁的实现是这样的（假设每个框都有一个共同的类box）：

$('.box').each(function(i) {
    this.id = 'box' + (i + 1);
});

另一种实现方式是：

$('.box').attr('id', function(i) {
    return 'box' + (i + 1);
});

但这并不像它最终在.attr将运行的循环中创建其他jQuery对象那样高效。

但是，最好不要使用顺序ID - 您通常可以在需要时使用.index()在其父项中查找子项的位置。

Answer 4

捕获当前删除的项目的ID

例如，如果您要删除某个按钮上的项目，请单击id #btn，然后：

$('#btn').click(function(e)

{
 var elemid=($('#box2').attr('id')).split(""); //elemid will be ["b","o","x","2"]

 var id=new Array(); //var id type is array because in case removed item's id contains more than one digit number like box22, box31, box49..

 for(var i=0; i<elemid.length;i++)

 {
   if(!isNaN(parseInt(elemid[i])))
   {
     id.push(elemid[i]); //extract all numbers and push them into id array
   }
 }

  id=parseInt(id.join("")); //join id array contents and change them from string to number

 var parent=$('#box2').parent();

 var pos=$(#box2).index();  //position from where to start changing id(s)

 $('#box2').remove();

 var k=0;

 parent.children('div').each(function(){

    if(k>=pos){
        $(this).attr('id','box'+id)

         id++;
    }
    k++;
  })
})

如何在jquery中重新分配id

4 个答案: