Ordina una lista html con javascript

Ho un set di tre voci di elenco che vorrei visualizzare automaticamente da alto a basso al caricamento della pagina. Idealmente usando jquery o javascript.Ordina una lista html con javascript

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

Ogni voce di elenco ha bisogno del proprio ID perché ognuno ha immagini di sfondo individuali. I numeri devono essere i nodi di testo in modo che un utente possa modificarli.

fonte

2012-01-12 danssker

Vedi qui http://stackoverflow.com/q/1134976/771300 –

@maerics Ho provato originariamente a crearlo da zero con un array 'function listSort (a, B) { return a - b; } var n = ["10", "775", "40", "1125", "1", "8"]; document.write (n.sort (listSort)); ' Ho ottenuto fino a riorganizzare la lista in ordine, ma non riuscivo a capire di lavorare con diversi ID di lista. – danssker

Questo sarà probabilmente il modo più veloce per farlo, dal momento che non fa uso di 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); 
}

Chiamare la funzione come:

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

È possibile ordinare altre liste allo stesso modo e se nella stessa pagina ci sono altri elementi con la classe list, dovresti dare il tuo ul id e passarlo usando quello.

Example JSFiddle

Modifica

Dal momento che lei ha detto che si desidera che accada su pageload, sto supponendo che si desidera che accada al più presto dopo l'ul è nel DOM che significa che si dovrebbe aggiungere la funzione sortList alla testa della pagina e utilizzare immediatamente dopo la vostra lista come questa:

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

fonte

2012-01-12 15:09:47 Paulpro

È bellissimo - ha un fascino. Ora per provare e scoprire cosa hai scritto ..! – danssker

Nota: questo non funzionerà nelle versioni di IE prima di IE9 senza altro codice perché 'getElementsByClassName()' non esiste nelle versioni precedenti di IE. – jfriend00

@danssker - Perché dovresti scegliere la versione javascript nativa più complicata rispetto alla versione jQuery più semplice se stai già utilizzando jQuery? Riesci davvero a vedere una differenza di prestazioni in un'operazione come questa? Il mio mantra in questo senso è: vai con semplicità prima e aggiungi solo complessità se ne hai assolutamente bisogno. – jfriend00

si può provare questo

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

vivo esempio: http://jsfiddle.net/B7hdx/1

fonte

2012-01-12 15:07:18 Francis

Hai testato completamente il tuo esempio live? Viene visualizzato "170 28 32" – Gran

È stato ordinato in ordine alfabetico, ma l'ho già risolto dal – Francis

dal più alto al più basso. http://jsfiddle.net/B7hdx/2/ FTFY –

utilizzando jQuery aiuto:

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

fonte

2012-01-12 15:08:51 Skyrim

Un metodo potrebbe essere quello di sort an array (beh, un oggetto jQuery) di li elementi e sostituire il contenuto (utilizzando il metodo html) del ul con l'array ordinato di elementi:

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

Ecco un working example.

fonte

2012-01-12 15:09:41

grazie, sembra bello ma ... non sono sicuro che l'array di ordinamento funzioni correttamente qui? assomiglia al suo ordinamento per prima cifra e non per il valore effettivo. – danssker

è possibile utilizzare questo metodo:

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

Controllare l'articolo qui: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Edit: V'è un plugin jQuery molto cool che lo fa: http://tinysort.sjeiti.com/

fonte

2012-01-12 15:10:50 T23

Qualcosa del genere dovrebbe aiutare:

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

fonte

2012-01-12 15:11:10 jabclab

Questo codice ordinerà quell'elenco presumendo che ci sia solo un elemento .list:

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

Potete vedere il lavoro qui: http://jsfiddle.net/jfriend00/FjuMB/

Per spiegare come funziona:

Ottiene l'oggetto padre .list.
Trova tutti gli oggetti figlio <li>.
rimuove tutti gli <li> oggetti figlio dal DOM, ma conserva i propri dati
Si ordina gli oggetti li utilizzando una funzione di ordinamento personalizzata
La funzione di ordinamento personalizzato ottiene il codice HTML nel tag Li e lo converte in un numero
Quindi, attraversando l'array nell'ordine appena ordinato, ciascun tag li viene aggiunto nuovamente al genitore originale.

Il risultato è che sono visualizzati in ordine.

Edit:

Questa versione migliorata sarà anche ordinare più oggetti lista in una sola volta:

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

Demo: http://jsfiddle.net/jfriend00/RsLwX/

fonte

2012-01-12 15:19:09 jfriend00

Ordina jQuery collezione come array di solito e quindi aggiungere ogni elemento indietro nell'ordine corretto.

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

http://jsfiddle.net/zMmWj/

fonte

2012-01-12 15:27:42 dfsq

C'è anche this small jQuery plugin.Che renderebbe l'ordinamento altro che:

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

fonte

2012-02-06 20:42:26 Sjeiti

è possibile utilizzare questo plugin jQuery leggero List.js causa

E 'leggero [solo 3K sceneggiatura]
facile da implementare nella vostra tabella HTML esistente utilizzando classe
ricercabile, ordinabile e filtrabile

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

fonte

2012-08-03 14:34:57 AbdullahDiaa

Versione non jquery (vaniglia JavaScript)

Vantaggi: la lista è ordinata in atto, che non distrugge il LI né rimuovere eventuali eventi che potrebbero essere associati a loro. E 'appena mescola le cose intorno

Aggiunto un id alla UL:

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

e la vaniglia javascript (senza 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); 
}

E la prova violino: https://jsfiddle.net/L27gpnh6/1/

fonte

2015-06-26 15:14:25 bob

Ordina una lista html con javascript

risposta

Problemi correlati