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>

今、私は2番目のものを削除します

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

私のIDはボックス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);
});

ただし、実行されるループ内に追加の jQuery オブジェクトを作成することになるため、これは効率的ではありません.attr

ただし、シーケンシャル 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 に答える