Как изменить id элементов на странице?

Question

[cdfgharweer33]

На странице имеется несколько блоков

<div class="general_block_1"><div align="center" id="1"></div><div class="close-button_1"></div></div>
<div class="general_block_2"><div align="center" id="2"></div><div class="close-button_2"></div></div>
<div class="general_block_3"><div align="center" id="3"></div><div class="close-button_3"></div></div>
<div class="general_block_4"><div align="center" id="4"></div><div class="close-button_4"></div></div>

При нажатии, например, на close-button_3 удаляется general_block_3.

$("body").on("click", ".close-button", function () {
const index = $(this).attr('id');
$('.general_block_' + index).remove();
}

И остаётся

<div class="general_block_1"><div align="center" id="1"></div><div class="close-button_1"></div></div>
<div class="general_block_2"><div align="center" id="2"></div><div class="close-button_2"></div></div>
<div class="general_block_4"><div align="center" id="4"></div><div class="close-button_4"></div></div>

Как, с помощью Jquery, поменять id блоков (и классы), чтобы они, после удаления, становились, в данном случае, 1, 2, 3; а не 1, 2, 4? Аналогично и с удалением других блоков.

Answer 1

[Владимир Проскурин]

Ну, можно добавить вызов функции

function sortItemIds() {
   $('[class^=general_block_]').each(function (ind) {
      ind += 1;
      $(this).attr('class', 'general_block_' + ind).attr('id', ind);
      $(this).next('[class^=close-button_]').attr('class', 'close-button_' + ind);
   });
}

Но учитывайте, id элементов не должен начинаться с цифры, там тоже правила именования. Сделайте хотя бы gb1, gb2 и.т.д.

UPD: как правильно заметил Даниил Попов в each первый аргумент это индекс.
Ваш код кстати не рабочий, т.к. вы id берете с close-button, а его там нет.
Вот готовый пример https://jsfiddle.net/0op64a5m/

Comments

[Даниил Попов]

Единственное, в each первый аргумент индекс, а второй элемент https://api.jquery.com/each/#each-function

[Владимир Проскурин]

Даниил Попов, да, вы правы, я перепутал с Array.prototype.forEach

Answer 2

[Lieroes]

$("body").on("click",  ".close-button", function () {
  const index = $(this).attr('id');
  $('.general_block_' + index).remove();
  $('.close-button').each(function( index ) {
    $(this).parent('div').attr('id', index);
  });
}

Но лучше так не завязывать хардкорно :) можно сделать иначе:

<div class="general_block" id="1"><div align="center"></div><div class="close-button"></div></div>
<div class="general_block" id="2"><div align="center"></div><div class="close-button"></div></div>
<div class="general_block" id="3"><div align="center"></div><div class="close-button"></div></div>
<div class="general_block" id="4"><div align="center"></div><div class="close-button"></div></div>

$("body").on("click",  ".close-button", function () {
  var closeButton = $(this);
  var generalBlock = closeButton.parents('.general_block');
  var alignedElement = generalBlock.find('.center');

  // тут уже можете делать, что хотите..
  generalBlock.remove();
}