将选中的项目放在列表顶部

Question

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

换句话说，五个项目清单应始终是这样的：
*两个
*三
一个
4
5

不是这个：
*三
*两个
一个
4
5

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

理想情况下，我还想为过渡设置动画。另外，有没有办法记住多个页面的选中状态？

这是我开始的 HTML：

<form>
<ul>
<li><label for="one"><input type="checkbox" id="one" />One</label></li>
<li><label for="two"><input type="checkbox" id="two" />Two</label></li>
<li><label for="three"><input type="checkbox" id="three" />Three</label></li>
<li><label for="four"><input type="checkbox" id="four" />Four</label></li>
<li><label for="five"><input type="checkbox" id="five" />Five</label></li>
</ul>
</form>

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