将选中的项目保留在列表顶部

我正在尝试创建一个清单，将检查的项目排序到列表顶部，当取消选中某个项目时，它将移动到选中的项目下方。 除了选中/未选中的排序，项目应保持其原始顺序，无论它们签入的顺序如何。

换句话说，五个项目列表应始终如下所示：
*两个
*三
一
四
五

不是这个：
*三
*二
一
四
五

我已经看到了如何将点击的项目移动到列表中的特定位置的示例，但没有考虑到列表中其他项目的状态。

理想情况下，我也希望为过渡做好准备。 另外，有没有办法记住多个页面上的已检查状态？

这是我开始使用的HTML：

 
 
One
 
Two
 
Three
 
Four
 
Five
 
  

Answer 1

选择原始列表以保存订单。 单击其中一个复选框时，对其进行迭代，首先附加选中的项目，然后附加未选中的项目：

 var list = $("ul"), origOrder = list.children(); list.on("click", ":checkbox", function() { var i, checked = document.createDocumentFragment(), unchecked = document.createDocumentFragment(); for (i = 0; i < origOrder.length; i++) { if (origOrder[i].getElementsByTagName("input")[0].checked) { checked.appendChild(origOrder[i]); } else { unchecked.appendChild(origOrder[i]); } } list.append(checked).append(unchecked); }); 

演示： http ： //jsfiddle.net/scSYV/2

Answer 2

好试试这个：

HTML：

 
 
 
One
 
Two
 
Five
 
Three
 
Four
 
  

JavaScript的：

 function sortNum(a,b){ a = $(a); b = $(b); if( a.find("input").is(':checked') && !b.find("input").is(':checked') ) return -1; if( !a.find("input").is(':checked') && b.find("input").is(':checked') ) return 1; else return a.attr('id') > b.attr('id') ? 1 : -1; }; 

现在要重新排列它们使用：

 $("li").sort(sortNum).appendTo("ul");