帮助更改 javascript/jquery 中的索引答案

【问题标题】：Help with changing index in javascript/jquery帮助更改 javascript/jquery 中的索引
【发布时间】：2010-01-27 19:48:20
【问题描述】：

我有一个 javascript 数组，它看起来像：

var styles = new Array();
styles[0] = { ... Position: 0, ... };
styles[1] = { ... Position: 1, ... };
styles[2] = { ... Position: 2, ... };
...
styles[N] = { ... Position: N, ... };

我使用这个数组来显示一个列表，其中每个项目都是一个 div。最终结果是这样的：

<div id="container">
 <div>... item 1...</div> 
 <div>... item 2...</div> 
 <div>... item 3...</div> 
</div>

现在“容器”div 也是 jquery 可排序的。这样我就可以拖放项目并更改位置。现在，每当用户将一个项目拖到不同的位置时，我都会通过循环遍历 div 项目来更新数组中的位置，这非常糟糕。它看起来或多或少是这样的：

var items = $("#container");
for (var i = 0; i < items.length; i++)
{
    ....
    styles[i] = { ... Position: i, ... };
}

有没有更好的方法来实现这一点？

更新 1：

我需要将位置保存在数据库中，这就是为什么我需要在列表更改后更改我的数组。该列表会根据其他标准而变化。所以我可以有一个包含 10 个项目的列表，或者我可以有一个 X 个项目的列表。这取决于用户选择的列表。现在，如果用户更改了一个列表，然后想要查看第二个列表，那么我需要确保第一个列表保持位置。

【问题讨论】：

循环后有什么变化吗？ style[i] = { Position: i }，总是一样的。你的数组索引就是你的位置。现在，……里面的东西似乎更重要了。
我更新了我的问题。请看我的评论。
我更新了我的回复，并举例说明了您将如何更新职位。

标签： javascript jquery jquery-ui-sortable

【解决方案1】：

我认为 Drew Wills 的回应是正确的，这也可能会有所帮助。 div 是一个 JavaScript 对象，这意味着您可以向它添加属性。因此，您可以通过将“信息对象”直接粘贴到每个 div 上来减少 JavaScript 代码的行数并增加代码的表现力，这意味着您不再需要数组。

您的数组最初来自哪里？我将假设它是您在服务器上拥有的某些数据的 JSON 化版本。所以我假设（猜测）你有某种“每个”或 for 循环从数组中创建 div，可能是这样的：

for (var i = 0; i < styles.length; i++)
{
    var newDiv = $("<div>" + style[i].item + "</div>";
    $("#container").append(newDiv);
}

假设你有这个，那么你可以把它修改成这样：

for (var i = 0; i < styles.length; i++)
{
    var newDiv = $("<div>" + style[i].item + "</div>";

    // KEY NEW LINE FOLLOWS:
    newDiv.myCustomObject = styles[i];

    $("#container").append(newDiv);
}

现在，随着 div 到处排序，这个“myCustomObject”也随之而来。你不再需要数组了。如果您需要更新“myCustomObject”上的“Position”属性，请使用 div 的“index”属性，正如 Drew Wills 所说。

因此，假设您的“样式”对象中有一个名为“颜色”的属性。想象一下，您想在点击时显示一个警报，告知与他们点击的 div 相关联的颜色。您现在可以在不需要“样式”数组的情况下完成此操作，因为 div 现在拥有您需要的一切。所以你可以这样做：

$("#container div").click(function() {
   alert("The color is " + this.myCustomObject.Color);
});

稍后，当需要通过 ajax 发布或发送职位时，您可以这样做：

$("#container div").each(function(index) {
   this.myCustomObject.Position = index;
}

注意：另外，有些人更喜欢使用 JQuery data() 方法将“myCustomObject”与 div 关联。它实现了相同的结果，并且可能在某些浏览器中更完整地收集垃圾。

【讨论】：

对不起，我不太明白。你有一个可以展示它的例子吗？
我添加了一个示例......希望即使我对您应用程序其余部分的猜测并不完全正确，您仍然可以看到我的意思。
感谢您的示例。但是当我对 div 进行排序时，位置将如何更新？我看不到这里的逻辑。如果我有 10 个项目并将第 9 个项目拖到第二位，那么 1 之后的所有其他索引都需要更改。这有意义吗？
我在回复中添加了一个示例。
我明白你的意思。谢谢你的提示。我会试试看。

【解决方案2】：

为什么你需要知道位置？

如果您可以依赖 jQuery 的 $.index() method，则根本不需要跟踪位置。

当您需要知道元素的位置时，只需使用类似以下的内容...

$("#container div").index(myDiv);

更新 1：

我明白了——服务器需要知道将它们存储在数据库中的位置。尽管如此，我并不喜欢在页面上有 2 种数据表示的概念：标记（div）和 JS 数组。我会考虑在最后一秒更改我的代码以构建数组（来自 div）......就在你将它发送到服务器之前。这样，您可以按顺序遍历 div，而不必在单独的数据结构中并行维护顺序。使 2 个结构保持同步混乱且容易出错

免责声明：我对您的网页一无所知。我不知道你的情况会导致这个建议不可行，但我想可能有什么问题。

小提示：如果区域中有数据元素未以某种方式在标记中表示，请考虑使用任意信息标记标记。

<a href="whatever.html" foo="bar">link text</a>

【讨论】：