选中时JQuery在列表中移动项目

Question

我一直在寻找一些代码，它们基本上会在选中复选框后将它们移动到列表的顶部。

我遇到了Move checkboxes on checked jQuery，这给了我一个很好的开始，但我现在陷入了另一个问题。

如果我在这个<ul> 列表中添加一个<li> 项目，但它只是一个没有<input> 部分的标准项目，它会阻止整个代码工作。

有没有我没见过的简单解决方法？我刚开始使用 JQuery，所以我很难说实话，所以它对我来说很新。

Answer 1

使用上一个问题的代码。我们可以添加“typeof”来检查 li 中是否有输入。这样可以避免问题并保持 li 静态。

  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 (typeof(origOrder[i].getElementsByTagName("input")[0]) != "undefined" && origOrder[i].getElementsByTagName("input")[0].checked) {
                checked.appendChild(origOrder[i]);
            } else {
                unchecked.appendChild(origOrder[i]);
            }
        }
        list.append(checked).append(unchecked);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul>
<li><label><input type="checkbox" id="one" />One</label></li>
<li><label><input type="checkbox" id="two" />Two</label></li>
<li><label><input type="checkbox" id="three" />Three</label></li>
<li><label><input type="checkbox" id="four" />Four</label></li>
<li><label><input type="checkbox" id="five" />Five</label></li>
<li><p>Hello World!</p></li>
</ul>