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

Question

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

9

我没有问题抓取元素列表并按字母顺序排序，但是我不理解如何使用模数来实现。

### 更新 ###

以下是按照“我的方式”工作的代码，但是我更喜欢下面提供的答案的可重用性，因此已接受该答案。

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

例如，假设我有以下无序列表：

```html

Apples
Bananas
Oranges

```

那么如何使用CSS创建一个带有自定义标记的列表？有两种方法可以实现这个目标。

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

由于我无法找到相关的文档，所以感激任何帮助。

- S16

你能发一下你已经有的代码吗？ - Cristian Sanchez

假设你是从后端开发这个项目，为什么不在服务器端完成呢？ - Chubas

1

实际上，这个问题有一个 CSS 解决方案，使用 column-count。 - Yi Jiang

一个后端解决方案会是理想的，但在这种情况下不可能。目前我所拥有的正在崩溃，不是一个好的起点。 - S16

4个回答

0

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的倍数时才有效。这不是一个很好的解决方案，但现在已经很晚了，我懒得想更好的方法。

编辑：修复了最后一个元素的问题。

- Cristian Sanchez

理论相当可靠，但实现不正确。传入一个长度为17的数组，n=4会导致0 4 8 12四次出现并以16作为第五行的结尾。 - ErikE

@Emtucidifor：是的。就像我说的，当n％lenght！= 0时它不起作用。 - Cristian Sanchez

0

看看这个是否有效：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]);
}

可能需要改进，但我真的不确定这个程序的工作效果如何。

- Yi Jiang

0

这是代码，一旦你理解了它，它就会变得非常简单。我知道你正在使用jQuery，但我不熟悉它的功能。这个代码很简单，也许不需要使用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. 有人能给我指点一下为什么我必须在IE6的宽度计算中添加2吗？等等...这不是div的边框吗？

- ErikE

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gilly3 · Accepted Answer

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