使用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從一個列表移動到下一個

回答

相關問題