Изменение нумерации упорядоченных идентификаторов div при добавлении одного в середине с Javascript

Question

Я занимаюсь разработкой приложения с использованием JavaScript. Мне нужно иметь div с идентификаторами (1,2,3 ...) и иметь возможность вставлять div между, например, 2 и 3, с помощью jquery, а затем иметь новые три, и три становится четыре, четыре становится пятью и т. д. У меня работает вставка div, мне просто нужно знать, как изменить порядок div. Есть идеи?

Answer 1

После того, как вы вставили новый div, вы можете сделать это:

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

Замените $ ('div') на свой собственный селектор.

Помните также, что в зависимости от того, какую версию HTML вы используете, идентификаторы не могут начинаться с цифры.

Answer 2

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

Answer 3

Вы не можете начинать идентификаторы с числового значения, но независимо от того, что вы бы сделали что-то вроде

// 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

Я почти уверен, что вы возвращаете вещи в DOM-порядке от селекторов jQuery, так что вы не можете просто найти родительский элемент, выбрать дочерние элементы <div>, а затем .each() в списке?