我可以轻松获取元素列表并按字母顺序对它们进行排序,但我很难理解如何使用模数进行排序。
###更新###
这是“我的方式”工作的代码,但是,我更喜欢下面提供的答案的可重用性,因此接受了这个答案。
<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 列中,每个 li 向右浮动。从视觉上看,这使得在较大的列表中查找项目变得困难。我需要的输出是这样的:
<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.
任何帮助将不胜感激,因为我找不到关于该主题的文档。
最佳答案
按字母顺序排列您的列表。在您的情况下,这已经完成,但如果没有:
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);
});
关于javascript - 使用模数按字母顺序对列表进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3681828/