如何將元素列表移動到具有最佳性能的另一個元素中？

Question

我有兩個列表中有很多項目「超過50」，我需要移動到一個單獨的元素及其所有事件。

<div id="container">  
 
    <div><ul id="g1"></ul><ul id="g2"></ul></div> 
 
    <div><ul id="gFill"></ul></div> 
 
<div>

我有相同數量的「G1」和「G2」列表中的項目，我需要在交錯的方式將它們移到「gFill」。

我用下面的腳本做：

var gFill = $("#gFill"); 
 
var g1 = $("#g1"); 
 
var g2 = $("#g2"); 
 
while (true) { 
 
    if ($("li", g1).size() >= $("li", g2).size()) { 
 
    $('li:first', g1).appendTo(gFill); 
 
    } 
 
    else { 
 
    $('li:first', g2).appendTo(gFill); 
 
    } 
 
    if ($("li", g1).size() < 1 && $("li", g2).size() < 1) { 
 
    break; 
 
    } 
 
}

儘管移動項目好，性能太慢。我必須改善表現，我該怎麼做？

之後，我需要反向的方法，我需要移動項目，如果「gFill」爲「g1」和「g2」，我做到了，但也很慢。

var gIn1 = [], gIn2 = []; 
 
var g1 = $("#g1"); 
 
var g2 = $("#g2"); 
 
$("li", "#container").each(function (i, e) { 
 
    var item = this; 
 
    if ($("li", g1).size() <= $("li", g2).size()) { 
 
    $(this).appendTo(g1); 
 
    } 
 
    else { 
 
    $(this).appendTo(g2); 
 
    } 
 
});

這將是巨大的去異步

Answer 1

我會移動的元素都在一個操作中，大多數這裏的問題可能是由於多重appendTo s到#gFill，您應該嘗試僅對appendTo致電一次。

首先，我會收集所有<li> S：

var $lis = $('#g1 li, #g2 li'); 

然後，我會創建一個空的數組來保存所有<li> S：

var stack = []; 

然後，我會循環通過堆棧，從0到中途向前計數。

for (var i = 0, j = half; i < half; i++, j++) 

所以，我想最終是這樣的：

(function ($) { 
    var $lis = $('#g1 li, #g2 li'); 
    var half = $lis.length/2; 
    var stack = []; 

    for (var i = 0, j = half; i < half; i++, j++) { 
    stack.push(
     $lis.eq(i), 
     $lis.eq(j) 
    ); 
    } 

    $('#gFill').append(stack); 
}(jQuery)); 

您可以通過它們的索引，通過堆棧和潛水起來去他們搬回。

下面是小提琴：https://jsfiddle.net/crswll/L62p2tyy/1/