在arr.splice()之后更新变量

Question

我有一个数组，用于填充div，并根据它们在数组中的位置为其ID分配数字。

我可以使用.splice()删除一个部分，但是在删除元素之后，ID在元素上保持不变(这将影响我如何删除相同数组中的后续项)，直到刷新页面。

例如，它开始于

<div id="favorites-1"></div>
<div id="favorites-2"></div>
<div id="favorites-3"></div>

当我移除其中一个div时，比如说<div id="favorites-1"></div>，我希望<div id="favorites-2"></div>现在成为新的<div id="favorites-1"></div>，而收藏集3变成收藏夹-2。

如果我从右到左移除这些元素，它就能工作。如果我从左到右移除元素，实际上只有第一个元素被删除。

如何使用JavaScript或jQuery根据它们的位置更新ID号？

Answer 1

//splice the array
arr.splice(x,y,replacements)
//iterate from the first modified item in the list and set the correct ID 
for(var i=x; i<arr.length; i++) {
    arr[i].id = "favorites-"+i;
}

是手动方式。

但是，如果您想做很多类似的事情，我建议您使用Knockout.js或类似的库。通过敲除，您将有一个可以观察到的项数组，您可以将项目添加到其中，并且可以自动地将id映射到元素的索引。例如，它可能看起来像这样。

<!-- ko foreach: myItems -->
<div data-bind="attr:{id:'favorites-'+$index"></div>
<!-- /ko -->

您也可以使用其他库(如AngularJS或EmberJS )来实现这一点，但是对于将数据模型绑定到DOM这一特殊问题，敲除是一个重点库。

Answer 2

您可以使用delete实现稀疏数组(这样就不需要更改元素的ID)：

var a = [0,1,2,3];
delete a[1]; // Key "1" was deleted

警告

即使没有4键，数组的长度仍然是1。如果您是根据长度循环数组，您将得到undefined的a[1]。如果您使用for..in迭代，您将跳过键"0"到"2"，但是可能会引起其他问题.