Question

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

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

如果我将<li>项添加到此<ul>列表中，但它只是一个没有<input>部分的标准项，则会停止整个代码的运行。

有没有一个简单的工作，我还没有看到？我很难说实话，因为我刚刚开始使用JQuery，所以对我来说这很新鲜。

Answer 1

使用上一个问题的代码。我们可以添加＆＃34; typeof＆＃34;检查li里面是否有输入。这可以避免这个问题，并且仍然是静态的。

＆＃13;

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

＆＃13;

<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>

＆＃13;

选中时，JQuery会移动列表中的项目

1 个答案: