使用模数按字母顺序对列表进行排序
我在抓取元素列表并按字母顺序对它们进行排序时没有任何问题，但我很难理解如何使用模数进行排序。
###更新###
这是代码工作’我的方式’，然而，我更喜欢下面提供的答案的可重用性，所以已经接受了答案。
$(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('' + $(oldList[i]).text() + ' '); } } $(this).html(newList.join('')); }); }); 例如。 说我有以下无序列表：
我将此列表设置为显示在4列中，每个列都向右浮动。 在视觉上这使得在较大列表中查找项目变得困难。 我需要的输出是这样的：
我正在寻找的是一个函数，我可以传递我的列表项数组，并返回我的数组，按字母顺序排序，选择模数; 在这种情况下4。
任何帮助将不胜感激，因为我找不到有关该主题的文档。
-
按字母顺序排列您的列表。 在您的情况下，这已经完成，但如果没有：
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)); -
将list元素替换为已排序的元素：
$("#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); });
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的倍数时才有效。 这不是一个很好的解决方案，但对我来说已经很晚了，我不会想要提出更好的方法。
编辑：修复了最后一个元素的问题
看看这是否有效： 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]); }
可能需要改进，但我不确定它的效果如何。
干得好。 一旦你搞清楚，代码就会非常简单。 我意识到你正在使用jQuery，但我不熟悉它使用它的function。 这很简单，也许没有必要。
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; }
这是certificate它有效的测试（在Firefox 3.6.9，IE 6，Chrome 1.0.154.36中测试）：
还有一件事：在原地移动元素可能很有用。 我几乎有脚本，但我的脚本向后运行（好像浮动首先从上到下）。 如果我有时间，我会处理它并发布代码。
PS有人想给我指点为什么我必须为IE6的宽度计算添加2？ 等等……这是div的边界不是吗？