0

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

例如。假设我通过 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

4

4 回答 4

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

演示

于 2013-10-25T09:06:26.710 回答
0

做这样的事情，对所有 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/

于 2013-10-25T09:12:04.360 回答
0

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

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

另一种实现是：

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

但这没有效率，因为它最终会在.attr将运行的循环中创建额外的 jQuery 对象。

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

于 2013-10-25T09:13:42.110 回答
0

捕获当前移除的项目的 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++;
  })
})
于 2013-10-25T09:46:29.907 回答