我们可以使用我在每个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">
解决方法
看一下这个
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()循环来命令它们