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到#gFill的多个appendTo，你应该尝试只调用一次{{1 }}

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

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));

你可以通过堆叠并通过索引将它们向上移动来移回它们。

这是一个小提琴："asynchronous initialization" pattern

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

1 个答案: