Tri d'une liste par ordre alphabétique avec un module

Question

Je n'ai pas du mal saisir une liste d'éléments et de les classer par ordre alphabétique, mais je vais avoir du mal à comprendre comment le faire avec un module.

### ### Mise à jour

Voici le code de travail « mon chemin », cependant, je comme la réutilisation de la réponse fournie ci-dessous plus, ont donc accepté cette réponse.

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

Par exemple. Dire que j'ai la liste non ordonnée suivant:

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

Je cet ensemble de liste pour afficher en 4 colonnes à chaque li flottait droit. Visuellement cela fait des éléments de constatation dans les listes plus grandes difficultés. La sortie I besoin est ceci:

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

Ce que je suis à la recherche est une fonction que je peux passer mon tableau d'éléments de liste et obtenir mon tableau retourné, classés par ordre alphabétique, avec un module de choix; dans ce cas 4.

Toute aide serait appréciée que je ne trouve aucune documentation sur le sujet.

Answer 1

1. Alphabétiser votre liste. Cela se fait déjà, dans votre cas, mais sinon:

   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. stocker l'index alphabétique de chaque élément:

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

3. Trier la liste alphabétique par module, puis 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. Remplacer les éléments de la liste avec vos éléments triés:

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

Voici la chose, tous ensemble:

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

Answer 2

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

Appliquer cette fonction à la liste déjà triée, puis il retournera une liste de chaînes dans l'ordre (presque) que vous voulez. Ensuite, ajoutez la liste qui a été renvoyée pour la liste non ordonnée dans les DOM.

En outre, je ne l'ai pas testé avec quoi que ce soit d'ailleurs cette liste. Donc, je le ferais si je vous étais. D'après ce que je vois, il ne fonctionne que si la longueur de la liste est un multiple de n. Pas terrible d'une solution, mais il est tard pour moi et je ne peux pas être pris la peine de trouver quelque chose de mieux.

EDIT: correction d'un problème le dernier élément

Answer 3

Voir si cela fonctionne: 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]);
}

a besoin d'améliorations, probablement, mais je ne suis pas vraiment sûr de savoir comment fonctionne ce tout.

Answer 4

Ici, vous allez. Le code est étonnamment simple une fois que vous comprendre. Je me rends compte que vous utilisez jQuery mais je ne suis pas assez familier avec elle d'utiliser ses fonctions. Ceci est assez simple que peut-être il est pas nécessaire.

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

Et voici le test pour prouver qu'il fonctionne (testé dans 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>

Une autre chose: il peut être utile de se déplacer simplement les éléments en place autour. Je scénario presque eu pour elle, mais mon script a été en cours d'exécution en arrière (comme si flotteurs sont passés de premier haut en bas). Si je reçois le temps que je vais travailler là-dessus et après le code.

P.S. Tout le monde me manque de donner des indications sur la raison pour laquelle je devais ajouter 2 au calcul de largeur pour IE6? Attendez ... ce sont les frontières de la div est pas?