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

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

换句话说,五个项目列表应始终如下所示:
*两个
*三


不是这个:
*三
*二


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

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

这是我开始使用的HTML:

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

 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

好试试这个:

HTML:

 

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");