web-dev-qa-db-fra.com

Trier une liste html avec javascript

J'ai un ensemble de trois éléments de liste que je voudrais afficher automatiquement de haut en bas lors du chargement de la page. Idéalement en utilisant jquery ou javascript.

<ul class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>

Chaque élément de la liste a besoin de son propre ID car ils ont chacun des images d'arrière-plan individuelles. Les nombres doivent contenir des nœuds de texte pour qu'un utilisateur puisse les modifier.

javascriptjqueryhtmlsortinghtml-lists
15
danssker

Ce sera probablement le moyen le plus rapide de le faire, car il n'utilise pas jQuery:

function sortList(ul){
    var new_ul = ul.cloneNode(false);

    // Add all lis to an array
    var lis = [];
    for(var i = ul.childNodes.length; i--;){
        if(ul.childNodes[i].nodeName === 'LI')
            lis.Push(ul.childNodes[i]);
    }

    // Sort the lis in descending order
    lis.sort(function(a, b){
       return parseInt(b.childNodes[0].data , 10) - 
              parseInt(a.childNodes[0].data , 10);
    });

    // Add them into the ul in order
    for(var i = 0; i < lis.length; i++)
        new_ul.appendChild(lis[i]);
    ul.parentNode.replaceChild(new_ul, ul);
}

Appelez la fonction comme:

sortList(document.getElementsByClassName('list')[0]);

Vous pouvez trier d'autres listes de la même manière, et si vous avez d'autres éléments sur la même page avec la classe list, vous devez donner un identifiant à votre ul et le transmettre en l'utilisant à la place.

Exemple JSFiddle

Modifier

Puisque vous avez mentionné que vous voulez que cela se produise sur pageLoad, je suppose que vous voulez que cela se produise dès que possible après que ul est dans le DOM, ce qui signifie que vous devez ajouter la fonction sortList en tête de votre page et utiliser immédiatement après votre liste comme ceci:

<head>
    ...
    <script type="text/javascript">
        function sortList(ul){
            var new_ul = ul.cloneNode(false);
            var lis = [];
            for(var i = ul.childNodes.length; i--;){
                if(ul.childNodes[i].nodeName === 'LI')
                    lis.Push(ul.childNodes[i]);
            }
            lis.sort(function(a, b){
               return parseInt(b.childNodes[0].data , 10) - parseInt(a.childNodes[0].data , 10);
            });
            for(var i = 0; i < lis.length; i++)
                new_ul.appendChild(lis[i]);
            ul.parentNode.replaceChild(new_ul, ul);
        }
    </script>
</head>
<body>
    ...
    <ul class="list">
        <li id="alpha">32</li>
        <li id="beta">170</li>
        <li id="delta">28</li>
    </ul>
    <script type="text/javascript">
        !function(){
            var uls = document.getElementsByTagName('ul');
            sortList( uls[uls.length - 1] );
        }();
    </script>
    ...
</body>
17
Paulpro

vous pouvez utiliser ce plugin jquery léger List.js cause

  1. c'est léger [seulement script 3K]
  2. facile à implémenter dans votre table HTML existante en utilisant la classe
  3. consultable, triable et filtrable

[~ # ~] html [~ # ~] 

<div id="my-list">
    <ul class="list">
       <li>
           <h3 class="name">Luke</h3>
       </li>
       <li>
           <h3 class="name">John</h3>
       </li>
    </ul>
</div>

Javascript 

var options = {
    valueNames: ['name']
};
var myList = new List('my-list', options);
6
AbdullahDiaa

Vous pouvez essayer ceci

var ul = $(".list:first");
var arr = $.makeArray(ul.children("li"));

arr.sort(function(a, b) {
    var textA = +$(a).text();
    var textB = +$(b).text();

    if (textA < textB) return -1;
    if (textA > textB) return 1;

    return 0;
});

ul.empty();

$.each(arr, function() {
    ul.append(this);
});

Exemple en direct: http://jsfiddle.net/B7hdx/1

5
Francis

Ce code triera cette liste en supposant qu'il n'y a qu'un seul .list article:

function sortList(selector) {
    var parent$ = $(selector);
    parent$.find("li").detach().sort(function(a, b) {
        return(Number(a.innerHTML) - Number(b.innerHTML));
    }).each(function(index, el) {
        parent$.append(el);
    });
}

sortList(".list");

Vous pouvez le voir fonctionner ici: http://jsfiddle.net/jfriend00/FjuMB/

Pour expliquer comment cela fonctionne:

  1. Il obtient l'objet parent .list.
  2. Il trouve tous les <li> objets enfants.
  3. Il supprime tous les <li> objets enfants du DOM, mais conserve leurs données
  4. Il trie les objets li à l'aide d'une fonction de tri personnalisée
  5. La fonction de tri personnalisé obtient le code HTML dans la balise li et le convertit en un nombre
  6. Ensuite, en parcourant le tableau dans le nouvel ordre trié, chaque balise li est ajoutée au parent d'origine.

Le résultat est qu'ils sont affichés dans l'ordre trié.

Modifier:

Cette version améliorée triera même plusieurs objets de liste à la fois:

function sortList(selector) {
    $(selector).find("li").sort(function(a, b) {
        return(Number(a.innerHTML) - Number(b.innerHTML));
    }).each(function(index, el) {
        $(el).parent().append(el);
    });
}

sortList(".list");

Démo: http://jsfiddle.net/jfriend00/RsLwX/

3
jfriend00

Il y a aussi ce petit plugin jQuery . Ce qui rendrait votre tri rien de plus que:

$('.list>li').tsort({attr:'id'});
3
Sjeiti

Version non jquery (Vanilla javascript)

Avantages: la liste est triée sur place, ce qui ne détruit pas les LI ni ne supprime les événements qui peuvent leur être associés. Il mélange simplement les choses

Ajout d'un identifiant à l'UL:

<ul id="myList" class="list">
    <li id="alpha">32</li>
    <li id="beta">170</li>
    <li id="delta">28</li>
</ul>

et le javascript Vanilla (pas de jquery)

// Grab a reference to the UL
var container = document.getElementById("myList");

// Gather all the LI's from the container
var contents = container.querySelectorAll("li");

// The querySelector doesn't return a traditional array
// that we can sort, so we'll need to convert the contents 
// to a normal array.
var list = [];
for(var i=0; i<contents.length; i++){
    list.Push(contents[i]);
}

// Sort based on innerHTML (sorts "in place")
list.sort(function(a, b){
    var aa = parseInt(a.innerHTML);
    var bb = parseInt(b.innerHTML);
    return aa < bb ? -1 : (aa > bb ? 1 : 0);
});

// We'll reverse the array because our shuffle runs backwards
list.reverse();

// Shuffle the order based on the order of our list array.
for(var i=0; i<list.length; i++){
    console.log(list[i].innerHTML);
    container.insertBefore(list[i], container.firstChild);
}

Et la preuve du violon: https://jsfiddle.net/L27gpnh6/1/

2
bob

Une méthode pourrait être de trier un tablea (enfin, un objet jQuery) des éléments li et remplacer le contenu (en utilisant html = méthode) du ul avec le tableau d'éléments triés:

$(".list").html($(".list li").sort(function(a, b) {
     return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);    
}));

Voici un exemple de travail .

1
James Allardice

Quelque chose comme ça devrait aider:

var $parent = $(".list");

$(".list li").sort(function (a, b) {
    return window.parseInt($(a).text(), 10) - window.parseInt($(b).text(), 10);
}).remove().each(function () {
    $parent.append($(this));
});
1
jabclab

utiliser jQuery pour obtenir de l'aide:

var sortFunction = function(a, b) {
    return (+($(b).text())) - (+($(a).text()));
}
var lis = $('ul.list li');
lis = Array.prototype.sort.call(lis, sortFunction);

for (var i = 0; i < lis.length; i++) {
    $('ul.list').append(lis[i]);
}

Fiddle Link

0
Skyrim

Vous pouvez utiliser cette méthode:

var mylist = $('ul');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

Consultez l'article ici: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Edit: Il existe un plugin jquery très cool qui fait ça: http://tinysort.sjeiti.com/

0
T23

Triez la collection jQuery comme un tableau habituel, puis ajoutez chaque élément dans le bon ordre.

$(".list li").sort(function(a, b) {
    return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);    
}).appendTo('.list');

http://jsfiddle.net/zMmWj/

0
dfsq