Question

我在编写一个利用jquery detach（）将一些元素移动到另一个div的Javascript函数时遇到了一些麻烦。我的问题是，我希望将每个独立元素放在特定位置，在所述div中的每个其他元素之后，我在确定如何执行此操作时遇到一些麻烦。

例如：

<div id="col-left">
 <li>Item One</li>
 <li>Item Three</li>
 <li>Item Five</li>
</div>

<div id="col-right">
 <li>Item Two</li>
 <li>Item Four</li>
 <li>Item Six</li>
</div>

需要成为：

<div id="col-left">
 <li>Item One</li>
 <li>Item Two</li>
 <li>Item Three</li>
 <li>Item Four</li>
 <li>Item Five</li>
 <li>Item Six</li>
</div>

我尝试了几件事，包括下面的内容，但它没有给出预期的结果。

$("#col-right li").each(function() {
   $(this).detach().insertAfter("#col-left li:nth-child(2n)");
});

我知道我需要定位＃col-left中的所有其他项目并在其后插入$（this）但是我不确定如何编写它。任何帮助将不胜感激！

Answer 1

一种解决方案是将所有左<li>存储在变量中，并根据索引插入：

var $originalLeft = $("#col-left li");
$("#col-right li").each(function(index, el) {
   $(this).insertAfter($originalLeft.eq(index));
});

另请注意，.detach不需要.insertAfter，因为{{1}}已经这样做了。

<强> Example Fiddle

使用detach（）将每个元素放在其他div中的每个其他元素之后

1 个答案: