Renuméroter les ID divisés numériquement en ajoutant un au milieu avec Javascript

Question

Je développe une application avec javascript. Ce dont j'ai besoin, c'est d'avoir divs avec id (1,2,3 ...) et être capable d'insérer un div entre, par exemple, 2 et 3, avec jquery, et ensuite avoir ce soit le nouveau trois, et trois devient quatre, quatre devient cinq, etc. J'ai l'insertion div qui fonctionne, j'ai juste besoin de savoir comment réorganiser les divs. Des idées?

Answer 1

Après avoir inséré les nouvelles div, vous pouvez le faire:

var i = 1; 
$('div').each(function() { 
    $(this).attr('id', i++); 
}); 

Remplacer $ ('div') par votre propre sélection. N'oubliez pas que, selon la version de HTML que vous utilisez, les ID ne peuvent pas commencer par un nombre.

Answer 2

Je suis assez sûr que vous obtenez des choses dans l'ordre DOM à partir des sélecteurs jQuery, donc vous ne pouvez pas simplement trouver l'élément parent, sélectionnez les éléments <div> enfant, puis .each() à travers la liste?

Answer 3

Vous ne pouvez pas commencer ID avec une valeur numérique, mais peu importe ce que vous feriez quelque chose comme

// set a data value in the div you have just inserted into the dom and set a variable theID to the current ID you have just inserted. 

$(this).data('inserted', true); 
var theID = $(this).attr('id'); // this will be 3. 


// now to update the other divs. 
$('div').each(function() { 
    if($(this).attr('id') >= theID && !$(this).data('inserted')){ 
     $(this).attr('id', $(this).attr('id') + 1); 
    } 
}); 

// now set the data inserted to false for future updates 
$('div#3').data('inserted', false); 

Answer 4

$(function() { 

    reorder(); 

    $('#click').click(function() { 

    $('<h2>hello world blah!</h2>').insertAfter('.content h2:eq(1)'); 
    reorder(); 
    }); 

}); 

function reorder() { 
$('.content h2').each(function(i) { 
    $(this).attr('id', 'order_'+(i+1)); 
// alert(parseInt(this.id.split('_')[1])); // this is the id # 
}); 
};