Jquery Sortable Auto Sort

Question

我们可以在运行时使用我在每个li中使用的id或idx对可排序的jquery进行排序。我希望它在运行时排序

here is fiddle。我希望它自动排序，例如<li id=1>应该比<li id=2>先等等..帮助将不胜感激，因为我是新手试图学习jQuery。

这里的HTML：

<div class="demo" style="width:444px"> 

<ul id="sortable"> 
    <li itemID=3 id='3' class="ui-state-default">3<button>delete</button></li> 
    <li itemID=6 id='6' class="ui-state-default">6<button>delete</button></li> 

    <li itemID=1 id='1' class="ui-state-default">1<button>delete</button></li> 
    <li itemID=4 id='4' class="ui-state-default">4<button>delete</button></li> 
    <li itemID=9 id='9' class="ui-state-default">9<button>delete</button></li> 
    <li itemID=2 id='2' class="ui-state-default">2<button>delete</button></li> 
    <li itemID=8 id='8' class="ui-state-default">8<button>delete</button></li> 
    <li itemID=5 id='5' class="ui-state-default">5<button>delete</button></li> 
    <li itemID=11 id='11' class="ui-state-default">11<button>delete</button></li> 
    <li itemID=7 id='7' class="ui-state-default">7<button>delete</button></li> 
    <li itemID=10 id='10' class="ui-state-default">10<button>delete</button></li> 

    <li itemID=12 id='12' class="ui-state-default">12<button>delete</button></li> 

</ul> 

</div><!-- End demo --> 

这里的JS：

$(function() { 
    $("#sortable").sortable(); 

    $(":button").click(function(){ 
    $(this).parent().remove(); 
    var arr=$("#sortable").sortable('toArray'); 
    text=arr.toString(); 
    alert(text); 
    }); 

}); 

而这里的CSS：

#sortable { list-style-type: none; margin: 0; padding: 0; } 
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } 

我也拉了一堆库和CSS（不确定是否需要JSFiddle）：

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css"> 
<script src="http://jqueryui.com/jquery-1.5.1.js"></script> 
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script> 
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script> 

<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script> 
<script src="http://jqueryui.com/ui/jquery.ui.sortable.js"></script> 
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css"> 

Answer 1

检查了这一点

http://jsfiddle.net/wmaqb/2/

使用标准的jQuery库，你可以指定一个函数用于排序的对象数组的.sort()方法。

$('#sort').click(function() { 
    var mylist = $('#sortable'); 
    var listitems = mylist.children('li').get(); 
    listitems.sort(function(a, b) { 
     var compA = parseFloat($(a).attr('id')); 
     var compB = parseFloat($(b).attr('id')); 
     return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; 
    });   
    $.each(listitems, function(idx, itm) { 
     mylist.append(itm); 
    }); 
}); 

一旦你得到了这个数组排序，你可以简单地用.each()周期