Trier une liste html avec javascript

J'ai un ensemble de trois éléments de la liste que je voudrais afficher automatiquement de haut en bas sur le chargement de la page. Idéalement à l'aide de 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 sa propre ID, car ils ont chacun des images d'arrière-plan. Les numéros des nœuds de texte de sorte que l'utilisateur peut le modifier.

voir ici stackoverflow.com/q/1134976/771300
J'ai essayé à l'origine de la construire à partir de zéro avec un tableau

function listSort(a, B) { return a - b; } var n = ["10", "775", "40", "1125","1", "8"]; document.write(n.sort(listSort));

je suis comme loin de réorganiser la liste dans l'ordre, mais ne pourrais pas le comprendre, de travailler avec différentes liste des Id.

OriginalL'auteur danssker | 2012-01-12

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

Appeler la fonction comme:

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

Vous pouvez trier les autres listes de la même façon, et si vous avez d'autres éléments sur la même page avec la liste de classe que vous devez donner à votre ul id et le pass à l'aide de ce lieu.

Exemple JSFiddle

Modifier

Puisque vous avez mentionné que vous le voulez sur pageLoad, je suis en supposant que vous voulez que cela se produise le plus tôt possible après l'ul est dans les DOM qui signifie que vous devez ajouter la fonction sortList à la tête de votre page et l'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>

C'est beau - fonctionne à merveille. Maintenant pour l'essayer et disect ce que vous avez écrit..!
Remarque: cela ne fonctionne pas dans les versions de IE avant IE9 sans plus de code car getElementsByClassName() n'existe pas dans les anciennes versions d'IE.
Pourquoi vous devez choisir le plus compliqué javascript natif version la plus simple, la version jQuery si vous êtes déjà à l'aide de jQuery? Pouvez-vous vraiment voir une différence de performance sur une opération de ce genre? Mon mantra, est à cet égard: aller avec simplicité première et seulement ajouter de la complexité si vous avez absolument besoin.
Pourquoi cloner le UL nœud? Vous pouvez juste réinsérez la triées LI nœuds à l'origine UL nœud.
Tu veux dire les versions antérieures à internet explorer 7, pas IE 9... Aussi le sortList fonctionne dans IE 6, il faut juste de l'appeler différemment, comme je l'ai dit avec l'aide d'un id.

OriginalL'auteur Paulpro

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

il est léger (seulement 3K script]
facile à mettre en œuvre dans votre tableau HTML à l'aide de la classe
consultable, sortable et filtrables

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

OriginalL'auteur AbdullahDiaa

Vous pouvez essayer ce

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

Live exemple : http://jsfiddle.net/B7hdx/1

Avez-vous testé votre exemple? Il affiche "170 28 32"
Il a été triée par ordre alphabétique, mais j'ai déjà corrigé
La plus haute à la plus basse. jsfiddle.net/B7hdx/2 FTFY
Bien... si mon site était déjà à l'aide de jquery, j'aurais utilisé cette.

OriginalL'auteur Francis

3

Ce code permettra de trier cette liste en supposant qu'il existe un seul .list élément:
```
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 à l'œuvre ici: http://jsfiddle.net/jfriend00/FjuMB/

Pour expliquer comment cela fonctionne:
1. Il obtient le .liste objet parent.
2. Il trouve tous les <li> les objets enfants.
3. Il supprime toutes les <li> enfant objets du DOM, mais préserve leurs données
4. Il trie les li objets à l'aide d'une fonction de tri personnalisé
5. La fonction de tri personnalisé obtient le code HTML dans la balise li et le convertit en un nombre
6. Puis, parcourant le tableau dans le nouvel ordre de tri, chaque balise li est ajouté sur le parent d'origine.
Le résultat est qu'ils sont affichés dans l'ordre de tri.

Edit:

Cette version améliorée sera même de trier plusieurs objets de la 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/

OriginalL'auteur jfriend00
3

Il y a aussi ce petit plugin jQuery. Qui permettrait de faire votre tri de rien de plus que:
```
$('.list>li').tsort({attr:'id'});
```
OriginalL'auteur Sjeiti

Quelque chose comme cela devrait vous 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));
});

OriginalL'auteur jabclab

1

Une méthode serait de le tri d'un tableau (ainsi, un objet jQuery) de la li éléments et remplacer le contenu (à l'aide de la html méthode) de la ul avec le tableau trié d'éléments:
```
$(".list").html($(".list li").sort(function(a, b) {
     return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);    
}));
```
Voici un exemple de travail.

merci, a l'air sympa mais.. pas sûr que le tri un tableau fonctionne correctement ici? ressemble à son centre de tri par le premier chiffre et non par la valeur réelle.

OriginalL'auteur James Allardice

Non la version jquery (javascript natif)

Avantages: la liste est triée en place, ce qui ne veut pas détruire le LI ni supprimer tous les événements qui peuvent être associés avec eux. Il a juste mélange de choses autour de

Ajouté un id à l'UL:

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

et la vanille javascript (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 le violon, la preuve: https://jsfiddle.net/L27gpnh6/1/

Bob merci, la meilleure solution que j'ai trouvé jusqu'à présent. Vous pouvez également utiliser des attributs de données parseInt(a.getAttribute(attr))

OriginalL'auteur bob

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

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

Edit: Il est très cool plugin jquery qui fait que : http://tinysort.sjeiti.com/

OriginalL'auteur T23

à l'aide de 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]);
}

Violon Lien

OriginalL'auteur Skyrim

0

Sorte jQuery collection comme d'habitude tableau, puis ajouter chaque élément de retour 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/

OriginalL'auteur dfsq

Vous devez vous connecter pour publier un commentaire.