¿Cómo puedo agregar un elemento de la lista en orden usando jQuery?

Question

¿Alguien sabe cómo agregar un elemento a una lista, pero hágalo así que está ordenado alfabéticamente con jQuery? Tengo el siguiente código que sólo añade un elemento de un menú desplegable para el final de la lista:

$("#projectList").append(
    "<li>" 
    + $("#Projects :selected").text() 
    + " <span class='removeProject' projectId='" + $("#Projects").val() + "'>Remove</span>" 
    + "</li>" 
); 

pero me gustaría ser capaz de insertar en su lugar apropiado en lugar de simplemente añadiendo a el final de la lista existente.

¡Cualquier ayuda es muy apreciada! Gracias!

Answer 1

creo que esto funcionaría:

var new = $(
    "<li>" 
    + $("#Projects :selected").text() 
    + " <span class='removeProject' projectId='" + $("#Projects").val() + "'>Remove</span>" 
    + "</li>" 
); 

var firstafteritem = $("#projectList").children().filter(function() { 
    return ($(this).text() > $("#Projects :selected").text()) 
}).eq(0); 

if (firstafteritem.length > 0) firstafteritem.before(new); 
else       $("#projectList").append(new); 

El valor de firstafteritem será el primer elemento de la lista que tiene un valor de texto después de la que va a añadir. (O ninguno si fuera el último). Luego, el if/else lo insertaría antes de ese elemento o al final de la lista.

(Esto, por supuesto, supone que los valores de su lista ya están en orden.)

Answer 2

No creo que hay una manera fácil con núcleo de jQuery por lo menos.

De la parte superior de mi cabeza, no probado, algo tan simple como esto podría funcionar si su lista es corta (desde su O (N))

var liArr=$("#projectList li").get(); 
var newText=$("#Projects :selected").text(); 
var newEle=$("<li>" 
    + newText 
    + " <span class='removeProject' projectId='" + $("#Projects").val() + "'>Remove</span>" 
    + "</li>"); 
for(var li=0; li<liArr.length; li++) { 
    if(newText<liArr[li].innerHTML) { 
    $("#projectList").get(0).insertBefore(newEle,liArr[li]); 
    newEle=null; 
    break; 
    } 
    } 
if(newEle) { $("#projectList").append(newEle); } 

Answer 3

Puede analizar la lista para ver dónde está su artículo debe ser agregado y luego usar la función de jquery after() para agregar su artículo en su lugar.

Answer 4

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#doctype li:first").before("<li><a href='intranet/library'>All documents</a></li>"); 
    }); 
</script>