Question

我有多个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 + '')

Answer 1

你可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

我真的不知道你使用它的是什么，但我确信有更好的方法。

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

Answer 2

代码的最后一部分，即'btn' + i - 1 + ''，返回NaN。您需要将i - 1放入括号：(i - 1)。此外，+ ''部分是不必要的。

所以你可以尝试：$('#btn' + i).attr('id', 'btn' + (i - 1))

Titus的答案更全面，所以你应该使用它 - 或者做一些完全不同的事情，正如其他人所建议的那样。

Answer 3

执行此操作的方法数量。这是另一个可能对你有用的。这更具流动性。

＆＃13;

$(".btn").click(function(e) {
  var btns = [];
  var $that = $(this);
  $that.parent().find(".btn").each(function(ind, elem) {
    if ($(elem).attr("id") != $that.attr("id")) {
      btns.push($(elem));
    }
  });
  var res = confirm("Are you sure you wish to delete this?");
  if(res){
    console.log("Removing " + $that.attr("id"));
    $that.remove();
    $.each(btns, function(key, $item) {
      console.log("Re-labeling " + $item.attr("id"));
      $item.attr({
        id: "btn-" + (key + 1),
        name: "btn-" + (key + 1)
      });
      console.log("New Label " + $item.attr("id"));
    });
  }
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="btn-1" name="btn-1" class="btn"> Delete Button</div>
  <div id="btn-2" name="btn-2" class="btn"> Delete Button</div>
  <div id="btn-3" name="btn-3" class="btn"> Delete Button</div>
  <div id="btn-4" name="btn-4" class="btn"> Delete Button</div>
</div>

＆＃13;

您可能还想在confirm()事件中添加click条件。我把它添加到我的例子中。

您不必使用数组。对我来说，它是一个额外的控制层。这为您提供了一种分组和管理您想要操作的jQuery对象的简便方法。使用$.each()然后迭代该数组，您可以根据数组索引轻松重新分配id和name。

将id与"-"一起使用对其他属性选择器也很有帮助，例如[name|="value"]：

描述：选择具有指定属性的元素，其值等于给定字符串或以该字符串后跟连字符（ - ）开头。

查看更多：https://api.jquery.com/attribute-contains-prefix-selector/

attr（'id'，'new id'）无法使用jquery更新多个div的id？

3 个答案: