javascript - jQuery 如何使 div 名称始终为 1,2,3

Question

我的问题是，当我附加 2 个 div 白色 jQuery 时，名称为:
这是第 1 部分
这是第 2 部分

但是当我删除第一个 div 时(这是 div 1)
并附加另一个div 它添加了一个 div 名称(这是 div 2):
这是第 2 部分
这是 div 2

原因是因为 div 的名称计算了 div 的总数...是否有其他方法可以对所有 div 进行编号，以便它们始终如下所示:
这是第 1 部分
这是第 2 部分
这是第 3 部分

即使我的 div 是:
这是第 1 部分
这是第 6 部分
这是第 12 部分

我希望它们始终是 1,2,3

jQuery 代码:

$('#add_item').click(function() {
    //div count
    var countDivs = $("div").length;

    //append content
    var removeBtn = ('<a class="removeBtn">x</a>')
    var h2 = ('<h2>This is div '+countDivs+'</h2>')
    var appendContent = ('<div>'+h2+removeBtn+'</div>') 
    $('#accordion').append(appendContent);
});

//remove button
$(document).on('click', '.removeBtn', function() {
    $(this).parent('div').andSelf().remove();
    return false;
});

JSFIDDLE

Answer 1

我认为每次删除 div 时您都必须编辑 div 的内容。

假设您有一个元素，并且想要向其中添加 div。

您将像现在一样添加，当您删除时，您将编辑所有其他 div。

代码应该是这样的

$('#add_item').click(function() {
  var countDivs = $("div").length;
  var removeBtn = ('<a class="removeBtn">x</a>')
  var h2 = ('<h2>This is div '+countDivs+'</h2>')
  var appendContent = ('<div class="appDiv">'+h2+removeBtn+'</div>') 
  $('#accordion').append(appendContent);
});

$(document).on('click', '.removeBtn', function() {
  $(this).parent('div').andSelf().remove();
  $('.appDiv').each(function(index,el){
    $(el).find('h2').text('This is div '+(index+1));
  });
  return false;
});

这是Fiddle

希望这有帮助:)