Question

我有两个列表，以便我可以添加和删除。起始列表中可以包含1到2,000个变量，其形式为：

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

我想将所有已检查的变量移动到下一个列表，将其从第一个列表中删除。

这样做的最佳方式是什么，因为我可以移动2,000件物品。同样在移动它们时，我不希望有任何重复项并按字母顺序保存varname（它们以这种方式加载）。

我也可以随意调整html。

Answer 1

好的，我想猜猜你想要什么。所以，使用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>

<强> JavaScript的：

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：http://jsfiddle.net/davidbuzatto/Fnxp2/

这是快速的吗？

Answer 2

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

编辑完复选框并提交后，您只需浏览并更改样式，以便显示或隐藏它们。我唯一关心的是，这将有过多的dom元素，但2000已经很多了。这种方式的优势在于除了添加/删除类之外，dom操作更少，并且还有一个额外的好处，即维护两个列表中元素的顺序。

我借了很多大卫的小提琴，但是对它进行了调整，以便没有创建新的dom元素here

希望这有帮助。

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

2 个答案: