CODEWITHSUNDEEP
jqueryhtml
pallav_125
pallav_125

Reputation: 211

How to reassign id in jquery

I am generating elements dynamically through jquery and creating dynamic id's for each element. Now i have also given the provision of removing a specific element through a remove button. In that case my id for that given element also gets removed. Now i have to reassign all id's so that all the id's are in sequence.

Eg. suppose i generate 4 divs dynamically thru jquery 

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

Now i remove the 2nd one 

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

my id's are now box 1, box 3, box 4

but i want them to be box1, box2, and box 3

Upvotes: 0

Views: 148

Answers (4)

Udit Bhardwaj
Udit Bhardwaj

Reputation: 1781

capture the id of the currently removed item

for example if you are are removing an item on some button click with id say #btn then :

$('#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++;
  })
})

Upvotes: 0

Alnitak
Alnitak

Reputation: 339816

If you must use sequential IDs, the most concise implementation is this (assuming each box has a common class of box):

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

an alternate implementation would be:

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

but this isn't as efficient as it ends up creating additional jQuery objects within the loop that .attr will run.

However, it would be best not to use sequential IDs at all - you can typically use .index() to find the position of a child within its parent whenever you need to.

Upvotes: 0

Ravi Hamsa
Ravi Hamsa

Reputation: 4721

Do something like this, have a common class to all divs

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

every time you remove a div, and in beginning run this function;

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

here is the jsfiddle http://jsfiddle.net/ravikumaranantha/bjBSs/1/

Upvotes: 0

Anton
Anton

Reputation: 32581

Try this every time you remove a box

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

or wrap your boxes with a div and do this

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

DEMO

Upvotes: 1

Related Questions