Question

我想将两个列表与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>

我想要一种方法来获得以下内容：

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

Answer 1

简短回答

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

请注意，如果您的列表长度不同，则需要进行一些调整。

工作演示

//Intertwine them
var intertwined = $.map($("#first li"), function(v, i) {
  return [v, $("#second li")[i]];
});

//Remove them
$(intertwined).remove();

//Add them to a new parent
$.each(intertwined, function(i, e) {
  $("#intertwined").append($(e))
});

//Clean old parents
$("#first, #second").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="first">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul id="second">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
</ul>

<ul id="intertwined">
</ul>

Answer 2

这是一个称为阵列拼接的概念，可以使用以下代码完成：

注意 - 即使您的两个数组的长度不相等，这种方法仍然有效！

＆＃13;

$(function () {
  var lists = $("ul");
  // create real arrays from jQuery collections
  var list1 = Array.apply(null, lists.eq(0).find("li"));
  var list2 = Array.apply(null, lists.eq(1).find("li"));
  function stitch(arr1, arr2) {
    var newArr = [];
    while (arr1.length && arr2.length) {
      newArr.push(arr1.shift());
      newArr.push(arr2.shift());
    }
    return newArr.concat(arr1, arr2);
  }
  var newList = stitch(list1, list2);
  $("#results").html(newList);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<ul id="results">
</ul>

＆＃13;

真正酷的是能够使用ES6收集/传播语法轻松创建可以将n个数组拼接在一起的通用函数。以下是如何做到的：

＆＃13;

$(function () {
  var lists = $("ul");
  // create real arrays from jQuery collections
  var list1 = Array.apply(null, lists.eq(0).find("li"));
  var list2 = Array.apply(null, lists.eq(1).find("li"));
  var list3 = Array.apply(null, lists.eq(2).find("li"));
  function stitch(...arrs) {
    var newArr = [];
    while (arrs.some(arr=>arr.length)) {
      arrs.forEach(arr=>{
        if (arr.length) {
          newArr.push(arr.shift());
        }
      });
    }
    return newArr;
  }
  var newList = stitch(list1, list2, list3);
  $("#results").html(newList);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<li>4</li>
<li>5</li>
</ul>

<ul>
<li>Do</li>
<li>Re</li>
<li>Me</li>
<li>Fa</li>
<li>So</li>
<li>Fa</li>
<li>So</li>
</ul>
<ul id="results">
</ul>

＆＃13;

Answer 3

考虑到：

两个列表都有相同的长度
您希望结果显示在第二个列表中

以下代码应该有效（请参阅内联注释）：

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

请参阅working JSFiddle example

将列表均匀地插入另一个列表中

3 个答案:

简短回答

工作演示