使用系数按字母顺序对列表进行排序 [英] Sorting a list alphabetically with a modulus

问题描述

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

I don't have any trouble grabbing a list of elements and sorting them alphabetically, but I'm having difficulty understanding how to do it with a modulus.

###更新###

这是代码的我的方式"，但是，我更喜欢下面提供的答案的可重用性，因此，请接受该答案.

Here's the code working 'my way', however, I like the re-usability of the answer provided below more, so have accepted that answer.

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

例如.假设我有以下无序列表:

For example. Say I have the following unordered list:

<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右移.从视觉上看，这使得在较大列表中查找项目变得困难.我需要的输出是这样的:

I have this list set to display in 4 columns with each li floated right. Visually this makes finding items in larger lists difficult. The output I need is this:

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

What I'm looking for is a function that I can pass my array of list items and get my array returned, sorted alphabetically, with a modulus of choice; in this case 4.

任何帮助将不胜感激，因为我找不到有关该主题的文档.

Any help would be appreciated as I can find no documentation on the subject.

推荐答案

1. 按字母顺序排列您的列表.对于您来说，这已经完成了，但是如果没有:

1. Alphabetize your list. This is already done, in your case, but if not:

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);

存储每个元素的字母索引:

Store the alphabetized index of each element:

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

首先按字母顺序对字母列表进行排序，然后按索引排序:

Sort the alphabetized list by modulus first, then index:

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));

将列表元素替换为已排序的元素:

Replace the list elements with your sorted elements:

$("#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);
});

这篇关于使用系数按字母顺序对列表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！