Jquery 可排序自动排序答案

【问题标题】：Jquery Sortable Auto SortJquery 可排序自动排序
【发布时间】：2011-06-10 07:55:43
【问题描述】：

我们能否使用我在每个 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">

【问题讨论】：

向问题添加了代码，以保持其独立性和可搜索性。当其他网站出现故障时，SO问题一定仍然有用:)

标签： jquery jquery-ui jquery-plugins

【解决方案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() 循环对它们进行排序

【讨论】：