2014-08-29 103 views
0

想想看,我有如下一個對象數組:更改對象數組的順序

var array = [ 
    { name: "A", position: "0" }, 
    { name: "B", position: "1" }, 
    { name: "C", position: "2" }, 
    { name: "D", position: "3" }, 
    { name: "E", position: "4" }, 
    { name: "F", position: "5" } 
]; 

比方說,用戶拖動有4位的元素,把它有位置1

var replacedItem = { name: "E", position: "4" }; 
var destinationItem = { name: "B", position: "1" }; 
的元素

如何可以重新排列使用javascript具有包含下列值的陣列元素的位置:

var array = [ 
    { name: "A", position: "0" }, 
    { name: "E", position: "1" }, 
    { name: "B", position: "2" }, 
    { name: "C", position: "3" }, 
    { name: "D", position: "4" }, 
    { name: "F", position: "5" } 
]; 

個謝謝,

+0

不應該B獲得位置4? – 2014-08-29 08:09:52

+0

你應該看看array.splice,這可以重新排列 – AirBorne04 2014-08-29 08:11:49

回答

1

1 - destionNationItemIndex

4 - replacedItemIndex

你可以試試這個: -

var removed = array.splice(4, 1); 
array.splice(1, 0, removed[0]); 
for (var i = 1; i <= 4; i++) { 
    array[i].position = (parseInt(array[i - 1].position) + 1).toString(); 
} 

打印你所需要的: -

var array = [ 
    { name: "A", position: "0" }, 
    { name: "E", position: "1" }, 
    { name: "B", position: "2" }, 
    { name: "C", position: "3" }, 
    { name: "D", position: "4" }, 
    { name: "F", position: "5" } 
] 
+0

在'parseInt'中使用radix參數是一種很好的做法 – thefourtheye 2014-09-01 09:36:31

1

可以使用splice分兩步移動元素:

var a = [ ... ]; 
var temp = a.splice(4, 1); // remove element at index 4 
a.splice(1, 0, temp[0]); // insert the removed element at index 1 

splice()返回被刪除的元素的數組(在這種情況下,1個元素的數組),這就是爲什麼你需要下標temp

既然你只需要左右移動name屬性,一個方法是將數組分成兩個陣列,重新排列對應name屬性陣列和重組:

var fromIndex = 4, toIndex = 1; 
// Step 1: collect names and positions in separate arrays 
var names = [], positions = []; 
array.forEach(function(elt) { 
     this.names.push(elt.name); 
     this.positions.push(elt.position); 
    }, {names: names, positions: positions}); 
// Step 2: do a circular permutation of the names between the indexes (inclusive) 
var temp = names.splice(fromIndex, 1); 
names.splice(toIndex, 0, temp[0]); 
// Step 3: recombine names and positions into an array of objects 
var n = array.length; 
array.length = 0; 
for (var i = 0; i < n; ++i) { 
    array.push({name: names[i], position: positions[i]}); 
} 
+0

但是這不會改變對象的位置屬性的值! – 2014-08-29 08:14:29

+0

@AbdulJabbar - 哎呀。誤解了問題。會考慮解決這個問題。 – 2014-08-29 08:15:06

+0

@AbdulJabbar - 現在修復了。 – 2014-08-29 08:28:15

-2

這是最簡單的邏輯實現的是:

var array = [ 
    { name: "A", position: "0" }, 
    { name: "B", position: "1" }, 
    { name: "C", position: "2" }, 
    { name: "D", position: "3" }, 
    { name: "E", position: "4" }, 
    { name: "F", position: "5" } 
]; 

var replacedItem = { name: "E", position: "4" }; 
var destinationItem = { name: "B", position: "1" }; 

for(var i=0; i<array.length; i++){ 
    if(array[i].position == replacedItem.position) 
     array[i].position = destinationItem.position; 
    else if(array[i].position == destinationItem.position) 
     array[i].position = replacedItem.position; 
} 

新陣列將是:

var array = [ 
     { name: "A", position: "0" }, 
     { name: "B", position: "4" }, 
     { name: "C", position: "2" }, 
     { name: "D", position: "3" }, 
     { name: "E", position: "1" }, 
     { name: "F", position: "5" } 
    ]; 

你只需要交換他們的位置。

DEMO

+0

這個例子做了一個簡單的交換操作,我想我們不需要任何迭代就可以做到這一點。如果你仔細檢查我的問題的最終狀態,你會發現它與你的結果有所不同。感謝您的回答。 – anilca 2014-08-29 08:34:01

+1

即使交換位置後,您的結果也不符合OP的需求。 – 2014-08-29 08:34:04