javascript - 取消选中所有项目后将选中的项目移动到顶部

Question

我实施了一个解决方案，将选中的项目移动到列表顶部，使用

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

现在，我有一个锚点可以取消选中列表中的所有项目。一旦我们单击锚标记，这些项目就会被取消选中。但是这些项目没有排序。它应该默认为首先显示的列表，如 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/RPN3x/

Answer 1

在 JS 中

      var list = $("ul");
var html=$("ul").html();
    sortItems(list);       
    var anch = $('#clear');
list.on('click',"a",function(){   
    var list = $("ul"); //$(this).parents().eq(0).find(':checkbox').removeAttr('checked');
  $("ul").html(html);  
                             sortItems(list);
});
function sortItems(list){
     origOrder = list.children();
    list.on("click", ":checkbox", function() {
        var i, checked = document.createDocumentFragment(),
            unchecked = document.createDocumentFragment();
        for (i = 2; 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);
    });
}

见演示