幫助與在javascript/jquery的

改變索引我有一個JavaScript數組，它看起來像：幫助與在javascript/jquery的

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項目。這取決於用戶選擇哪個列表。現在，如果用戶更改了一個列表，然後又希望看到第二個列表，那麼我需要確保第一個列表保留位置。

來源

2010-01-27 vikasde

你的循環後有什麼變化嗎？ style [i] = {Position：i}將永遠是相同的。你的數組索引是你的位置。現在，...中的內容似乎更重要。 – 2010-01-27 20:19:24

我更新了我的問題。請看我的評論。 – vikasde 2010-01-27 20:24:05

我更新了我的回覆，並提供了一個如何更新職位的例子。 – 2010-01-27 22:17:18

我認爲德魯威爾斯的反應是在標誌上，這也可能有所幫助。 div是一個JavaScript對象，這意味着您可以爲其添加屬性。因此，您可以通過將「信息對象」粘貼到每個div上來減少JavaScript代碼的行數，並增加代碼的表現力，這意味着您不再需要您的數組。

你的數組來自哪裏？我將假設它是服務器上某些數據的JSON格式版本。所以我假設（猜測），你有某種「每個」或循環從陣列創建的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); 
}

現在，隨着divs在各地得到排序，這個「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; 
}

注：另外，有些人寧願使用將「myCustomObject」與div關聯的JQuery data（）方法。它達到了相同的結果，並且可能在某些瀏覽器中更加完整地收集垃圾。

來源

2010-01-27 20:47:19

對不起，但我真的不明白。你有一個能夠證明它的例子嗎？ – vikasde 2010-01-27 20:58:10

我添加了一個例子......希望即使我對你的應用程序的其他部分的猜測並不完全在標記上，你仍然可以看到我在看什麼。 – 2010-01-27 21:24:56

謝謝你的例子。但是當我對div進行排序時，位置如何更新？我沒有看到這裏的邏輯。如果我有10個項目，並且將9項目拖到第2個位置，則1之後的所有其他索引都需要更改。那有意義嗎？ – vikasde 2010-01-27 21:28:24

爲什麼你需要知道這個位置？

如果你能依靠jQuery的$.index() method，你將不必跟蹤位置。

當你需要知道一個元素的位置，只需使用類似如下的...

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

更新1：

我見 - 服務器需要知道將它們存儲在數據庫中的位置。儘管如此，我對頁面上有這個數據的兩種表示方式並不是瘋狂的：標記（div）和JS數組。我會考慮改變我的代碼，以便在最後一秒建立數組（在div中），然後再發送給服務器。這樣你可以順序循環div，而不必在單獨的數據結構中並行維護順序。保持2個結構凌亂同步，並可能容易出錯

小聲明：我不知道你的網頁的所有內容。我不知道你的情況會使這個建議行不通，但我想可能有些東西在那裏。小提示：如果某些數據元素在某些區域中沒有以標記方式表示，請考慮使用任意信息標記標記。

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

來源

2010-01-27 20:14:24

我更新了我的問題。請看我的評論。 – vikasde 2010-01-27 20:27:10

幫助與在javascript/jquery的

回答

相關問題