javascript - attr('id'，'new id')无法使用jquery更新多个div的ID？

我有多个Div，其中包含删除按钮。
单击按钮后，我需要更新已删除的Div下方的每个div的ID。

<div id="btn1" name="btn1"> Delete Button</div>
<div id="btn2" name="btn2"> Delete Button</div>
<div id="btn3" name="btn3"> Delete Button</div>
<div id="btn4" name="btn4"> Delete Button</div>

如果我删除了btn2，那么btn3 id应该更改为btn2，而btn4 id应该更改为btn3。
我已经尝试过att（）函数，但是它不起作用。

<div id="btn1" name="btn1"> Delete Button</div>
<div id="btn2" name="btn2"> Delete Button</div>
<div id="btn3" name="btn3"> Delete Button</div>

$('#btn' + i + '').attr('id', 'btn' + i - 1 + '')

最佳答案

您可以执行以下操作：

$("[id^=btn]").click(function(){
  var prevId = this.id;
  $(this).nextAll("[id^=btn]").each(function(){
     var tmpId = this.id;
     this.id = prevId;
     prevId = tmpId;
  });
  $(this).remove();
  $("[id^=btn]").each(function(){
     console.log("Name:", $(this).attr("name"), "ID:", this.id)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn1" name="btn1"> Delete Button</div>
<div id="btn2" name="btn2"> Delete Button</div>
<div id="btn3" name="btn3"> Delete Button</div>
<div id="btn4" name="btn4"> Delete Button</div>

我真的不知道您在用它做什么，但是我确信有更好的方法来做。

上面代码中的重要部分是nextAll，您可以找到有关它的更多信息HERE