在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

警告

即使沒有1鍵，數組的長度仍將為4 。 如果要基於長度循環數組，則a[1]將undefined 。 如果使用for..in進行迭代，則會從鍵"0"跳到"2" ，但這可能會導致其他問題 ……