Javascript 在另一个列表中均匀插入列表

我想用jQuery合并两个列表，但我甚至不知道从哪里开始。我需要将每个项目放在另一个列表之间，而不是在列表的前面或后面。不太确定这个词的最佳表达方式，但基本上我有以下HTML

<ul>
  <li>A<li>
  <li>B<li>
  <li>C<li>
  <li>D<li>
  <li>E<li>
</ul>

<ul>
  <li>1<li>
  <li>2<li>
  <li>3<li>
  <li>4<li>
  <li>5<li>
</ul>

A

B

C

D

E



1

2

3

4

5

我想要一种方法来获得以下信息：

<ul>
  <li>A<li>
  <li>1<li>
  <li>B<li>
  <li>2<li>
  <li>C<li>
  <li>3<li>
  <li>D<li>
  <li>4<li>
  <li>E<li>
  <li>5<li>
</ul>

A

1

B

2

C

3

D

4

E

5

简短回答 您可以将jQuery中的选择器视为任何其他数组，因此可以将这两个选择映射到包含交织结果（a1b2c3..）的新数组中，并将元素移动到新的父数组中。有时，找到答案最困难的部分是知道如何用词来表达问题

请记住，如果列表的长度不同，您需要进行一些调整

---

工作演示

//将它们交织在一起
var interwined=$.map（$（“#第一个li”），函数（v，i）{
返回[v，$（“#秒里”）[i]；
});
//移除它们
$（交错）。删除（）；
//将它们添加到新的父级
$。每个（相互交织，功能（即，e）{
$（“#交织”）。追加（$（e））
});
//干净的老父母
$（“#第一，#第二”）.remove（）


一,
二,
三,
四,
五,


a
b
c
d
e


简短回答
您可以将jQuery中的选择器视为任何其他数组，因此可以将这两个选择映射到包含交织结果（a1b2c3..）的新数组中，并将元素移动到新的父数组中。有时，找到答案最困难的部分是知道如何用词来表达问题

请记住，如果列表的长度不同，您需要进行一些调整


工作演示

//将它们交织在一起
var interwined=$.map（$（“#第一个li”），函数（v，i）{
返回[v，$（“#秒里”）[i]；
});
//移除它们
$（交错）。删除（）；
//将它们添加到新的父级
$。每个（相互交织，功能（即，e）{
$（“#交织”）。追加（$（e））
});
//干净的老父母
$（“#第一，#第二”）.remove（）


一,
二,
三,
四,
五,


a
b
c
d
e


考虑到：


两个列表的长度相同
您希望结果出现在第二个列表中

以下代码应该可以工作（请参见内联注释）：

//从每个列表中获取所有li项
var firstLIs=$（'ul#first li'）；
var secondLIs=$（'ul#second li'）；
//获取列表的长度
var total=第一个LIS.长度；
//将存储结果的变量（合并的LIs）
var内容=[]；
对于（变量i=0；i

考虑到：


两个列表的长度相同
您希望结果出现在第二个列表中

以下代码应该可以工作（请参见内联注释）：

//从每个列表中获取所有li项
var firstLIs=$（'ul#first li'）；
var secondLIs=$（'ul#second li'）；
//获取列表的长度
var total=第一个LIS.长度；
//将存储结果的变量（合并的LIs）
var内容=[]；
对于（变量i=0；i

请参见
这是一个称为阵列缝合的概念，可通过以下代码完成：

注意-即使您的两个数组长度不相等，此方法也有效


$（函数（）{
var列表=$（“ul”）；
//从jQuery集合创建实际数组
var list1=Array.apply（null，lists.eq（0）.find（“li”）；
var list2=Array.apply（null，lists.eq（1）.find（“li”）；
功能针迹（arr1、arr2）{
var newArr=[]；
while（arr1.length&&arr2.length）{
newArr.push（arr1.shift（））；
newArr.push（arr2.shift（））；
}
返回新的arr.concat（arr1，arr2）；
}
var newList=stitch（列表1，列表2）；
$（“#结果”）.html（新列表）；
});


A
B
C
D
E


一,
二,
三,
四,
五,


这是一个称为阵列缝合的概念，可通过以下代码完成：

注意-即使您的两个数组长度不相等，此方法也有效


$（函数（）{
var列表=$（“ul”）；
//从jQuery集合创建实际数组
var list1=Array.apply（null，lists.eq（0）.find（“li”）；
var list2=Array.apply（null，lists.eq（1）.find（“li”）；
功能针迹（arr1、arr2）{
var newArr=[]；
while（arr1.length&&arr2.length）{
newArr.push（arr1.shift（））；
newArr.push（arr2.shift（））；
}
返回新的arr.concat（arr1，arr2）；
}
var newList=stitch（列表1，列表2）；
$（“#结果”）.html（新列表）；
});


A
B
C
D
E


一,
二,
三,
四,
五,



// Getting all li items from each list
var firstLIs = $('ul#first li');
var secondLIs = $('ul#second li');

// Getting the length of the list
var total = firstLIs.length;
// Var that will store the result (merged LIs)
var content = [];

for (var i = 0; i < total; i++) {
  // Feeding our content array with LI items from both list
  content.push(firstLIs[i], secondLIs[i]);
}

// Overriding content from second list with the newly merged LIs
$('ul#second').html(content);