Come ordinare i div in base al loro id usando jQuery?

Question

Ho una serie di div con id casuali:

<div id="container"> 
    <div id="2"></div> 
    <div id="9"></div> 
    <div id="7"></div> 
    <div id="1"></div> 
    <div id="4"></div> 
</div> 

C'è un modo veloce per ordinarli in base ai loro valori di id utilizzando jQuery? Grazie.

Answer 1

userei il plugin tinysort:

http://tinysort.sjeiti.com/

Nel tuo caso sarebbe qualcosa di simile:

$("#container > div").tsort("",{attr:"id"});

Answer 2

Ci sono plugin e simili per fare l'ordinamento degli elementi . Se stai pianificando di riordinare gli elementi DOM, dovresti probabilmente usarne uno.

Se si desidera solo un elenco ordinato dei div, è possibile utilizzare Javascript - poiché gli array possono essere ordinati utilizzando una funzione di confronto personalizzata. È possibile convertire il set selezionato di <div> s in un array utilizzando toArray() e quindi ordinarli utilizzando questo meccanismo.

$('#container > div').toArray().sort(function(a,b) { a.id - b.id }); 

si potrebbe anche utilizzare il metodo detach() e appendTo() rimuovere e re-inserire gli elementi in modo ordinato. Tuttavia, questo potrebbe non essere il modo più efficiente per riordinare gli elementi DOM.

Answer 3

Prova il mio plug-in jquery $.toArrayouter, utilizzando la libreria Underscore.

$('#container').html(_.sortBy($('#container>div').toArrayouter(),function (name) {return name}).join('')) 

Demo: http://jsfiddle.net/abdennour/fDZjR/1/