JQuery UIをソート可能にアルファベット順にソートする方法は？

Question

JQuery UIのソート可能なデフォルトをアルファベット順に並べ替えることが可能かどうか疑問に思っていました。もしそうなら、ソート可能なアイテムにアイテムを追加すると、それをアルファベット順にソートすることも可能ですか？以下は私のコードです：

// Adds item to sortable list 
$(".addButton").click(function(e) { 
    e.preventDefault(); 
    // set var item to be the string inputted by the user 
    var item = $("input[name='brewItem']").val(); 
    // parses input string, splitting at commas into liArray containing substrings as elements 
    var liArray = item.split(", "); 
    // for loop to add each brew to the sortable list (length-1 because last element in array is empty string) 
    for (var i = 0; i < liArray.length-1; i++) { 
     // sets var $li to the string in the ith index of liArray 
     var $li = $("<li class='ui-state-default'/>").text(liArray[i]); 



     // adds var $li to gui 
     $("#sortable").append($li); 
    }; 
    // refreshes the page so var $li shows up 
    $("#sortable").sortable("refresh"); 
}); 

私はこれを実装する方法が不明です。どんな助けでも感謝しています！ソート可能

var $sortable =$("#sortable").sortable(options); 

は、イベントハンドラの前にDOM

への不要なアクセスをブラウザを圧倒していない

Answer 1

必要に応じて並べ替える必要があります。

これを試してください： - Fiddle

使用カスタムソート方法

function sort() { 
    var sortableList = $('#sortable'); 
    var listitems = $('li', sortableList); 

    listitems.sort(function (a, b) { 

     return ($(a).text().toUpperCase() > $(b).text().toUpperCase()) ? 1 : -1; 
    }); 
    sortableList.append(listitems); 

} 

のイベントCreateを作成して、ボタンに

$("#sortable").sortable({ 
    create: function (event, ui) { 
     sort(); 
    } 
}); 

かにjqueryのUIソート可能なウィジェットを拡張]をクリックし、あなたのソート可能で、それを呼び出しますあなたのカスタムソートロジックが含まれています。

Answer 2

インスタンス化、

var $brew=$("input[name='brewItem']"); 

あなたの入力をキャッシュするHTMLを作成して添付を最適化文字列

joinを使用できますあなたのハンドラ内の行でそれを行う

$('<li>'+ $brew.val().split(", ").join('</li><li>')+'</li>').appendTo($sortable) ; 

NB：PERFは、Liセットが包まれていたされた方が良いだろうが、あなたの場合には、あなたがされるであろうと言うことはできません後...アンラップする必要があるだろう高速

$sortable.sortable('refresh')