Sorting a list alphabetically with a modulus

Question

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.

### UPDATE ###

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>

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>

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.

Answer 1

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

Apply that function to the already sorted list, and then it will return a list of strings in the order (almost) that you want. Then add the list that was returned in order to the unordered list in the DOM.

Also, I haven't tested it with anything besides that list. So I'd do that if I were you. From what I see, it only works if the length of the list is a multiple of n. Not that great of a solution but it's late for me and I can't be bothered to come up with anything better.

EDIT: fixed the issue with the last element

Answer 2

See if this will work: 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]);
}

Needs improvements, probably, but I'm not really sure how well this works at all.

Answer 3

The code you have works in all browsers I tested including IE8 if you just change

oldList[i].text

to

oldList[i].innerText

or you can change it to

$(oldList[i]).text()

or you can just do the whole thing like this:

$(document).ready( function() {
    $('.sectionList2').each( function() {
        var oldList = $('li', this),
            columns = 4,
            newList = [];

        for( var start = 0; start < columns; start++){
            for( var i = start; i < oldList.length; i += columns){
                newList.push(oldList[i]);
            }
        }
        for( var i = 0; i < oldList.length; i++){
            this.appendChild(newList[i]);
        }
    });
});

Answer 4

Here you go. The code is surprisingly simple once you figure it out. I realize you are using jQuery but I'm not familiar enough with it to use its features. This is simple enough that maybe it's not necessary.

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

And here's the test to prove it works (tested in 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>

One more thing: it might be useful to just move the elements around in-place. I almost had script for it but my script was running backwards (as if floats went from top to bottom first). If I get time I'll work on it and post the code.

P.S. Anyone want to give me pointers on why I had to add 2 to the width calculation for IE6? Wait... it's the borders of the div isn't it?

Answer 5

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

2. Store the alphabetized index of each element:

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

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

4. Replace the list elements with your sorted elements:

   $("#myList li").remove();
   $("#myList").append(columnSortedList);
   

Here is the whole thing, all together:

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