Javascript 使用JQuery/JS将div从一个列表移动到下一个列表

我有两个类似的列表，以便从中添加和删除。起始列表中可以有1到2000个变量，形式如下：

<div class="notadded" id="X"><input type="checkbox" />Varname and varlabel</div>

Varname和varlabel

我想将所有选中的变量移到下一个列表，将它们从第一个列表中删除

考虑到我可能有2000件物品要搬走，最好的方法是什么。此外，在移动它们时，我不希望有任何重复项，并保留varname的字母顺序（它们是以这种方式加载的）

---

我也可以随意调整html。

好的，我正在试着猜你想要什么。因此，请使用jQuery查看以下代码：

HTML:

<div id="sourceList">
    <div class="notadded" id="1"><input type="checkbox" />Varname and varlabel 1</div>
    <div class="notadded" id="2"><input type="checkbox" />Varname and varlabel 2</div>
    <div class="notadded" id="3"><input type="checkbox" />Varname and varlabel 3</div>
    <div class="notadded" id="4"><input type="checkbox" />Varname and varlabel 4</div>
    <div class="notadded" id="5"><input type="checkbox" />Varname and varlabel 5</div>
    <div class="notadded" id="6"><input type="checkbox" />Varname and varlabel 6</div>
    <div class="notadded" id="7"><input type="checkbox" />Varname and varlabel 7</div>
    <div class="notadded" id="8"><input type="checkbox" />Varname and varlabel 8</div>
    <div class="notadded" id="9"><input type="checkbox" />Varname and varlabel 9</div>
</div>

<input id="moveBtn" type="button" value="Move them!"/>
<input id="removeBtn" type="button" value="Remove them!"/>

<div id="targetList"></div>

function move( sourceSelector, targetSelector ) {
    var selectedItens = $( sourceSelector + " .notadded input:checked" );
    selectedItens.attr( "checked", false );
    $( targetSelector ).append( selectedItens.parent() );
}

$(function() {
    $( "#moveBtn" ).click(function(){
        move( "#sourceList", "#targetList" );
    });

    $( "#removeBtn" ).click(function(){
        move( "#targetList", "#sourceList" );
    });
});

jsFiddle：

---

这是否足够快？

我不确定这对大规模性能会有多糟糕，如果两个列表都有2000个项目，但只有第一个项目最初可见，会发生什么情况

编辑复选框并提交后，只需浏览并更改样式，即可显示或隐藏样式。我唯一担心的是，这将有过多的dom元素，但2000已经是很多了。这样做的好处是，除了添加/删除类之外，dom操作更少，并且还有一个额外的好处，即这样可以保持两个列表中元素的顺序

我借用了很多David的小提琴，但对其进行了修改，这样就不会创建新的dom元素

---

希望这有帮助。

你有什么想法吗？我已经用过了。每个都是wwaaaaaaaaaaaay tooo slowi试过了，但速度太慢：@chris，你能用你的代码创建一个JSFIDLE吗？很高兴能帮你做些改变，测试和展示。我改变了选择表达式，因为它太大了。Josh，我改变了我的选择表达式。看一看。它现在变小了。在看到你的解决方案后，我仍然认为我的解决方案，即使是做动作，也可能比你的更快（更简单）。您的解决方案的一个好处是维护了订单。我改变了一点，保留了你的解决方案。看一看: