2009-05-19 2 views
9

Kann jemand ein Element zu einer Liste hinzufügen, aber tun es so, dass es alphabetisch mit jQuery sortiert ist? Ich habe den folgenden Code bekomme, das nur ein Element aus einem Drop-Down bis zum Ende der Liste ergänzt:Wie kann ich ein Listenelement in der Reihenfolge hinzufügen, in der jQuery verwendet wird?

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

aber ich möchte in der Lage sein, es stattdessen Anfügen von nur in seiner entsprechenden Stelle einfügen zu das Ende der bestehenden Liste.

Jede Hilfe wird sehr geschätzt! Danke!

Antwort

7

ich denke, das würde funktionieren:

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

Der Wert firstafteritem wird der erste Listenelement sein, die einen Textwert nach dem man Sie hinzufügen hat. (Oder keine, wenn es die letzte wäre.) Dann würde das if/else es entweder vor diesem Element oder am Ende der Liste einfügen.

(Dies setzt natürlich voraus, dass die Werte der Liste sind bereits in Auftrag.)

+0

Das hat perfekt funktioniert! Vielen Dank! –

0

Ich glaube nicht, gibt es eine einfache Art und Weise mit Kern jQuery zumindest.

Aus der Spitze von meinem Kopf, nicht getestet, einfach so etwas wie dies funktionieren könnte, wenn Ihre Liste kurz ist (seit seiner 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); } 
0

Sie die Liste analysieren können, um zu sehen, wo Ihr Artikel soll hinzugefügt werden und dann verwenden Sie die after() jquery Funktion, um Ihren Artikel an Ort und Stelle hinzuzufügen.

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

Willkommen bei StackOverflow, @irshad. Nehmen Sie sich Zeit, um zu sehen, wie Sie Ihre Antworten formatieren: http://stackoverflow.com/editing-help =) –

Verwandte Themen