使用模数按字母顺序对列表进行排序

我没有任何困难获取元素列表并按字母顺序对它们进行排序，但是我很难理解如何使用模数进行排序。使用模数按字母顺序对列表进行排序

### 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

使用模数按字母顺序对列表进行排序

回答

相关问题