排序元素javascript

我正在尋找一種方法來排序我的元素，但它並不像聽起來那麼容易。請讓我來解釋一下排序元素javascript

我的元素每6個元素（縮略圖）分組，每個x代表一個縮略圖然而，所有縮略圖是一個DIV

xx xx xx 
xx xx xx 
xx xx xx

第一列（6×的）內部是可見的，當你點擊一個按鈕，出現下一列，舊的消失。

如果碰巧x的數量不可能與6分開，例如，你有11×的，然後將其添加填料元素（O公司）

xx xx 
xx xx 
xx x0

如果每個元素不管縮略圖或填料代表了許多在命令他們在這個「表」，向其中加入它看起來像這樣

1,2 3,4 5,6 
7,8 9,10 11,12 
13,14 15,16 17,18

但是我想在最初的頁面上有最新的縮略圖（1-> 6）。因爲它們是最新的（最新的縮略圖），所以我想先給他們看。這意味着之前的「表」必須是這樣的（由「日期」排序）：

1,2 7,8 13,14 
3,4 9,10 15,16 
5,6 11,12 17,18

現在的困難是，它應該重新排列的縮略圖無論多少列有是否有隻2列或10列。

這裏的問題的活鏈接（2列，7個縮略圖和5個填料）： link text 然後點擊畫廊，你會看到「列」 1（6個縮略圖）

所有元素（縮略圖和填料）被插入到一個數組（JavaScript的），所以我需要改變它的每個元素的位置與JS （或jQuery的，如果您更輕鬆）

我知道這是不是真的一個簡單的問題，我試過了我最好解釋一下，如果您對這個問題有任何疑問，請隨時提問，我會盡快回復。

編輯：好的，我很靠近文森特羅伯特。我的數組對象（我的縮略圖在這裏）現在需要按照文森特的數組排列方式進行排序。我測試了他的方法，將陣列的元素排列到完美的地方。他們使用數字作爲索引，但我沒有。有人知道怎麼做嗎？

來源

2009-11-06 Ayrton

我不太瞭解......做列開始發揮作用，僅用於顯示的目的呢？ – Zoidberg 2009-11-06 14:28:29

或者它們是數據結構的一部分嗎？ – Zoidberg 2009-11-06 14:29:11

我稱它爲一個列，因爲它看起來像一個，但它不是一個。基本上元素編號5和11都被清除。（在現場版本）3列元素17也將被清除。理解？ – Ayrton 2009-11-06 14:45:30

您必須將您的值視爲像素。如果您想對它們進行排序，您需要首先計算它們的位置，然後將該位置轉換爲表格中的偏移量。

一旦你有了偏移量，就很容易對數組進行排序。這裏是（從0到簡化）的示例代碼：

// Your constants 
var nbGroup = 3, 
    nbCol = 2 
    nbLine = 3, 
    nbPerGroup = nbCol * nbLine; 

function computeOffset(index) 
{ 
    // Search the block 
    var group = Math.round(index/nbPerGroup - 0.5); 
    var groupPos = index % nbPerGroup; 

    // Search the line 
    var line = Math.round(groupPos/nbCol - 0.5); 
    // Search the column 
    var col = groupPos % nbCol; 

    // This formula is dependent on your layout 
    return col 
     + line * nbCol * nbGroup 
     + group * nbCol; 
} 

// Fill an array from 0 to 17 
var array = []; 
for(var i = 0; i < 18; ++i) 
{ 
    array.push(i); 
} 

// Sort our array based on the position offset 
array.sort(function(a, b) 
{ 
    return computeOffset(a) - computeOffset(b); 
}); 


console.log(array); // [0, 1, 6, 7, 12, 13, 2, 3, 8, 9, 14, 15, 4, 5, 10, 11, 16, 17]

我沒有做DOM節點的實際排序，但你有足夠的智慧通過自己來做，你呢？ ;-)

好，排序DOM節點的數組，你必須能夠訪問你的節點的索引或計算它。這裏是一個解決方案（未測試的代碼）：

var elements = ... 

var nodes = [] 
for(var i = 0, l = elements.length; i < l; ++i) 
{ 
    nodes.push({ index:i, element:elements[i] }); 
} 

nodes.sort(function(a, b) 
{ 
    return computeOffset(a.index) - computeOffset(b.index); 
}); 

// Your DOM array should be sorted now. 
// Note that you will have to append DOM nodes (yes again) 
// to the document to actually sort the displayed elements. 

var target = ... 

for(var i = 0, l = nodes.length; i < l; ++i) 
{ 
    target.appendChild(nodes[i].element); 
}

來源

2009-11-06 14:48:51

非常感謝，我測試了你的理論，它的工作就像一個魅力。保持良好的工作。 – Ayrton 2009-11-06 15:07:44

只有在您對容器進行排序的數組中，它似乎才起作用。但在這個例子中，我的數組包含了我的縮略圖。任何想法如何解決這個問題？ – Ayrton 2009-11-06 16:48:48

當我測試函數中的a和b（它需要是一個整數）並且此時不在。我需要傳遞元素的索引。我嘗試過但沒有成功。在此先感謝 – Ayrton 2009-11-06 17:04:50

我看到已經有一個答案，我參加了一個略少計算方法，但我不知道這是否是隻是在正確的順序一次顯示他們或者如果你以後真的需要排序的話。

這裏是我的代碼：

<style type="text/css"> 

    ul { 
     padding: 0; 
     margin: 0 2px 2px 0; 
     overflow: hidden; width: 200px; 
     background-color: red; 
     float: left; 
    } 



</style> 
<script type="text/javascript"> 
    var thumbsDOTlength = 30; 

    var col = 0; 
    var perRow = 6; 

    var html = []; 
    html.push("<ul>"); 
    for(var i = 0; i < thumbsDOTlength; i++) { 
     html.push("<li> Item " + i + " (" + col + "," + (i - col * perRow) + ")</li>"); 

     if(i % perRow == perRow - 1) { 
      html.push("</ul><ul>"); 
      col++; 
     } 
    } 

    html.push("</ul>"); 

    document.write(html.join('')); 

</script>

來源

2009-11-06 14:57:43 Les

排序元素javascript

回答

相關問題