如何将一个元素列表移动到另一个性能最佳的元素中

How to move an elements list into another element with the best performance?

本文关键字：元素 另一个 移动 性能 最佳 列表 一个      更新时间：2023-09-26

>我有两个列表，其中包含很多项目"超过 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);
  }
});

异步会很棒

我会在一个操作中移动所有元素，这里的大部分问题可能是由于#gFill的多个appendTo，您应该尝试让它只调用一次appendTo。

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

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

然后，我将创建一个空数组来保存所有<li>：

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/

相关文章：