1

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

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

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

考虑到我可以移动 2,000 件物品，最好的方法是什么。此外，在移动它们时，我不想有任何重复并按字母顺序保留 varname（它们是以这种方式加载的）。

我也可以随意调整html。

4

2 回答 2

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/

这够快吗？

于 2012-07-19T22:35:50.693 回答
1

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

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

我借了很多大卫的小提琴，但对其进行了调整，因此这里没有创建新的 dom元素

希望这可以帮助。

于 2012-07-19T23:47:19.093 回答