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

我有两个列表，以便我可以添加和删除。在首发名单可以从1到2000的变量anywher在它的形式是：使用JQuery/JS将div从一个列表移动到下一个

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

我想所有的检查瓦尔移动到下一个列表，从第一个列表中删除它们。

这样做的最好方法是什么，因为我可以移动2000件物品。另外，当移动它们时，我不想有任何重复项并按字母顺序保存varname（它们以这种方式加载）。

我也可以根据需要调整html。

来源

2012-07-19 cdub

你有*任何*想法？ – zerkms 2012-07-19 22:12:43

[你有什么尝试]（http://whathaveyoutried.com/）？ – 2012-07-19 22:13:49

我已经使用。每个，但这是wwaaaaaaay tooo slow – cdub 2012-07-19 22:14:15

好吧，我想猜你想要什么。因此，采取使用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-19 22:35:50 davidbuzatto

我改变了选择表达式，因为它太大了。 – davidbuzatto 2012-07-20 02:21:37

我不知道这将是一个大规模的性能会有多糟糕，如果你有两个列表完整的2000个项目，但只有第一个最初可见，会发生什么。

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

我借了不少大卫的拨弄但适应它，这样有创建here

希望这有助于没有新的DOM元素。

来源

2012-07-19 23:47:19

乔希，我改变了我的选择表达。看一看。现在它变小了。看到你的解决方案之后，我仍然认为我的解决方案，甚至是做出这些举动，或许比你的解决方案更快（更简单）。您的解决方案的一个好处是订单得到维护。我改变了一点保留你的解决方案。看看：http://jsfiddle.net/davidbuzatto/vLce3/1/ – davidbuzatto 2012-07-20 02:40:54

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

回答

相关问题