使用模數按字母順序對列表進行排序

我沒有任何困難獲取元素列表並按字母順序對它們進行排序，但是我很難理解如何使用模數進行排序。使用模數按字母順序對列表進行排序

### UPDATE ###

這裏是工作的「我的路」的代碼，但是，我想下面更提供了答案的重用性，所以已經接受了答案。

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.sectionList2').each(function() { 
     var oldList = $('li a', this), 
      columns = 4, 
      newList = []; 
     for(var start = 0; start < columns; start++){ 
      for(var i = start; i < oldList.length; i += columns){ 
       newList.push('<li><a href="' + oldList[i].href + '">' + $(oldList[i]).text() + '</a></li>'); 
      } 
     } 
     $(this).html(newList.join('')); 
    }); 
}); 
</script>

例如，說我有以下無序列表：

<ul> 
    <li><a href="~">Boots</a></li> 
    <li><a href="~">Eyewear</a></li> 
    <li><a href="~">Gloves</a></li> 
    <li><a href="~">Heated Gear</a></li> 
    <li><a href="~">Helmet Accessories</a></li> 
    <li><a href="~">Helmets</a></li> 
    <li><a href="~">Jackets</a></li> 
    <li><a href="~">Mechanic's Wear</a></li> 
    <li><a href="~">Pants</a></li> 
    <li><a href="~">Protection</a></li> 
    <li><a href="~">Rainwear</a></li> 
    <li><a href="~">Random Apparel</a></li> 
    <li><a href="~">Riding Suits</a></li> 
    <li><a href="~">Riding Underwear</a></li> 
    <li><a href="~">Socks</a></li> 
    <li><a href="~">Vests</a></li> 
</ul>

我有這個列表設置爲顯示在每列4浮動權利的4列。從視覺上看，這使得查找較大列表中的項目變得困難。我需要的輸出是這樣的：

<ul> 
    <li><a href="~">Boots</a></li> 
    <li><a href="~">Helmet Accessories</a></li> 
    <li><a href="~">Pants</a></li> 
    <li><a href="~">Riding Suits</a></li> 
    <li><a href="~">Eyewear</a></li> 
    <li><a href="~">Helmets</a></li> 
    <li><a href="~">Protection</a></li> 
    <li><a href="~">Riding Underwear</a></li> 
    <li><a href="~">Gloves</a></li> 
    <li><a href="~">Jackets</a></li> 
    <li><a href="~">Rainwear</a></li> 
    <li><a href="~">Socks</a></li> 
    <li><a href="~">Heated Gear</a></li> 
    <li><a href="~">Mechanic's Wear</a></li> 
    <li><a href="~">Random Apparel</a></li> 
    <li><a href="~">Vests</a></li> 
</ul>

什麼我要找的是我可以通過我的列表項陣列，並得到我的數組的函數返回的，按字母順序排序，選擇的彈性模量;在這種情況下4.

任何幫助將不勝感激，因爲我沒有找到關於這個問題的文件。

來源

2010-09-10 S16

你能張貼你已經擁有的代碼？ – 2010-09-10 02:03:42

而且，假設您是從後端開發的，爲什麼不在服務器端執行此操作？ – Chubas 2010-09-10 02:07:51

實際上有一個CSS解決方案，'column-count' – 2010-09-10 02:10:52

Alphabetize your list。這已經完成，你的情況，但如果不是：

function alphabetizeElements(a, b) 
{ 
    var aText = $(a).text(); 
    var bText = $(b).text(); 
    return aText > bText ? 1 : aText < bText ? -1 : 0; 
} 
var alphabetizedList = $("#myList li").sort(alphabetizeElements);

商店每個元素的按字母順序排列的索引：

$.each(alphabetizedList, function(i) 
{ 
    $(this).data("alphaIndex", i); 
});

排序按字母順序列出的模量第一，然後指數：

function listColumnSortFn(columns) 
{ 
    return function(a, b) 
    { 
     var aIndex = $(a).data("alphaIndex"); 
     var bIndex = $(b).data("alphaIndex"); 
     return ((aIndex % columns) - (bIndex % columns)) || (aIndex - bIndex); 
    } 
} 
var columnSortedList = alphabetizedList.sort(listColumnSortFn(4));

用您的排序元素替換列表元素：

$("#myList li").remove(); 
$("#myList").append(columnSortedList);

這裏是整個事情，都在一起：

function sortList(columns) 
{ 
    var alphabetizedList = $("#myList li").sort(alphabetizeElements); 
    $.each(alphabetizedList, function(i) 
    { 
     $(this).data("alphaIndex", i); 
    }); 
    var columnSortedList = alphabetizedList.sort(listColumnSortFn(columns)); 
    $("#myList li").remove(); 
    $("#myList").append(columnSortedList); 
} 
function alphabetizeElements(a, b) 
{ 
    var aText = $(a).text(); 
    var bText = $(b).text(); 
    return aText > bText ? 1 : aText < bText ? -1 : 0; 
} 
function listColumnSortFn(columns) 
{ 
    return function(a, b) 
    { 
     var aIndex = $(a).data("alphaIndex"); 
     var bIndex = $(b).data("alphaIndex"); 
     return ((aIndex % columns) - (bIndex % columns)) || (aIndex - bIndex); 
    } 
} 
$(function() 
{ 
    sortList(4); 
});

來源

2010-09-10 19:13:16 gilly3

var columnify = function (a,n) { 
    var result = []; 
    for (var i = 0, lastIndex = a.length - 1; i < lastIndex; i++) 
     result.push(a[i * n % (lastIndex)]); 
    result[lastIndex] = a[lastIndex]; 
    return result; 
} 

var products = ["Boots", 
"Eyewear", 
"Gloves", 
"Heated Gear", 
"Helmet Accessories", 
"Helmets", 
"Jackets", 
"Mechanic's Wear", 
"Pants", 
"Protection", 
"Rainwear", 
"Random Apparel", 
"Riding Suits", 
"Riding Underwear", 
"Socks", 
"Vests",] 

columnify(products, 4) 
["Boots", "Helmet Accessories", "Pants", "Riding Suits", "Eyewear", "Helmets", "Protection", "Riding Underwear", "Gloves", "Jackets", "Rainwear", "Socks", "Heated Gear", "Mechanic's Wear", "Random Apparel", "Vests"]

將該函數應用於已排序的列表，然後它將返回您想要的順序（幾乎）的字符串列表。然後添加爲了DOM中的無序列表返回的列表。

另外，我還沒有測試它與除列表之外的任何東西。所以如果我是你，我會這麼做。從我所看到的情況來看，只有當列表的長度是n的倍數時纔有效。這不是一個很好的解決方案，但對我來說已經很晚了，我不能爲提出更好的方案而煩惱。

編輯：固定的最後一個元素

來源

2010-09-10 02:49:57

該理論相當合理但實施不正確。傳入n = 4的17個元素的數組將產生0 4 8 12四次，最後一行將在第五行中返回16。 – ErikE 2010-09-10 06:44:38

@Emtucidifor：是的。就像我說的，當n％lenght！= 0時它不起作用。 – 2010-09-10 10:18:24

問題看看這將工作：http://jsfiddle.net/6xm9m/2

var newList = new Array(); 
var listItem = $('#list > li'); 
var mod = 4; 
var colCount = Math.ceil(listItem.length/mod); 

listItem.each(function(index) { 
    var newIndex = ((index % colCount) * mod) + Math.floor(index/colCount); 
    // $(this).text(newIndex); 

    newList[newIndex] = this; 
}); 

$('#list').empty(); 

for(var i = 0; i < newList.length; i++){ 
    $('#list').append(newList[i]); 
}

需要改進，可能是，但我真的不知道怎麼好這個在所有工作。

來源

2010-09-10 04:16:01

在這裏，你去。一旦你想出來，代碼就非常簡單了。我意識到你正在使用jQuery，但我不熟悉它使用它的功能。這很簡單，也許沒有必要。

function pivotArray(arr, columns) { 
    var l = arr.length, out = [], ind = 0, i = 0; 
    for (; i < l; i += 1) { 
     out[ind] = arr[i]; 
     ind += columns; 
     if (ind >= l) { 
     ind = ind % columns + 1; 
     } 
    } 
    return out; 
}

而這裏的測試，以證明它的工作原理（在Firefox 3.6.9，IE 6，Chrome瀏覽器1.0.154.36測試）：

<html> 
<head> 
<style type="text/css"> 
a.panelnum { 
    display:block; 
    float:left; 
    width:40px; 
    height:40px; 
    border:1px solid black; 
    text-align:center; 
    vertical-align:middle; 
    text-decoration:none; 
    font-size:2em; 
} 
</style> 
</head> 
<body onload="doit(17, 4);"> 
<div id="output" style="border:1px solid blue;"> 
</div> 
<script type="text/javascript"> 

function pivotArray(arr, columns) { 
    var l = arr.length, out = [], ind = 0, i = 0; 
    for (; i < l; i += 1) { 
     out[ind] = arr[i]; 
     ind += columns; 
     if (ind >= l) { 
     ind = ind % columns + 1; 
     } 
    } 
    return out; 
} 

function doit(size, columns) { 
    document.getElementById('output').innerHTML = 'starting'; 
    var l = size; 
    var inp = []; 
    for (var i = 0; i < l; i += 1) { 
     inp[i] = i; 
    } 
    var result = pivotArray(inp, columns); 
    var str = ''; 
    for (i = 0; i < l; i += 1) { 
     str += '<a class="panelnum">' + result[i] + '</a>'; 
    } 
    var d = document.getElementById('output') 
    d.innerHTML = '<p>Some pre text</p>' + str + '<p style="clear:both;">and some post text</p>'; 
    d.style.width = (columns * d.childNodes[1].offsetWidth + 2) + 'px'; 
} 
</script> 
</body> 
</html>

一兩件事：它可能是隻招有用在就地的元素。我幾乎有腳本，但我的腳本倒退（彷彿浮動從上到下首先）。如果我有時間，我會處理它併發布代碼。

P.S.任何人都想給我指出爲什麼我必須添加2到IE6的寬度計算？等等......這是div的邊界不是嗎？

來源

2010-09-10 06:41:51 ErikE

使用模數按字母順序對列表進行排序

回答

相關問題