Question

我正在寻找使用数组一起加入列表，因此它们来自以下内容：

<ul>
<li class="list-item">One</li>
<li class="list-item">Two</li>
<li class="list-item">Three</li>
</ul>

<ul>
<li class="container">Content One</li>
<li class="container">Content Two</li>
<li class="container">Content Three</li>
</ul>

到此

<ul>
<li class="list-item">One</li>
<li class="container">Content One</li>
<li class="list-item">Two</li>
<li class="container">Content Two</li>
<li class="list-item">Three</li>
<li class="container">Content Three</li>
</ul>

以下是我到目前为止所尝试的内容，但在这个阶段我有点失落：

var nav = $(".nav-item");
var content = $(".container");

var array1 = jQuery.makeArray( nav );
var array2 = jQuery.makeArray( content );
$.each(array1, function(i, value){
    var str =  '<div class="nav-item">' + array1 + '</div>' + '<div class="container">' + array2 + '</div>';

    $(str).appendTo("body");
});

提前致谢

Answer 1

您只需使用after方法：

var $list = $('ul:eq(1)').detach().children(); 
$('ul:eq(0) li').after(function(index) { 
   return $list.eq(index); 
});

Here is a demo.

Answer 2

试试这个 - http://jsfiddle.net/sergdenisov/mu47acb9/1/：

<强> HTML：

<ul class="first-list">
    <li class="list-item">One</li>
    <li class="list-item">Two</li>
    <li class="list-item">Three</li>
</ul>

<ul class="second-list">
    <li class="container">Content One</li>
    <li class="container">Content Two</li>
    <li class="container">Content Three</li>
</ul>

<强>使用Javascript：

var $listItems = $('.list-item');
var $containers = $('.container');
var $outerUl = $('<ul class="outer-list"></ul>');

var maxLength = Math.max($listItems.length, $containers.length);

for (var i = 0; i < maxLength; i++) {
    var $listItem = $listItems.eq(i);
    var $container = $containers.eq(i);

    if ($listItem) {
        $outerUl.append($listItem);
    }
    if ($container) {
        $outerUl.append($container);
    }
}

$('body').append($outerUl);
$('.first-list').remove();
$('.second-list').remove();

Answer 3

假设你想保留相同的订单，那怎么样？

var list = $(".list-item");
var container = $(".container");

// Generate the list items, in your order
var mergedItems = Array();
list.each(function(i) {
    mergedItems.push(this); // list item

    var containerItem = container.get(i);
    if (typeof containerItem !== undefined) {
        mergedItems.push(containerItem);
    }
});

// Output
var list = $('<ul/>').appendTo('body');
$(mergedItems).each(function(i) {
    list.append(this);
});

小提琴：http://jsfiddle.net/fx7azwzg/

Answer 4

这个怎么样：

setInterval

使用以下HTML：

$(document).ready(function() {
    var listItems1 = [];
    $("#list1").children("li").each(function() {
        listItems1.push($(this).text())
    });


    var listItems2 = [];
    $("#list2").children("li").each(function() {
        listItems2.push($(this).text())
    });


    var list3 = "";
    for (var i = 0; i < listItems2.length; i++) {
        list3 = list3 + '<li>' + listItems1[i] + '</li>';
        list3 = list3 + '<li>' + listItems2[i] + '</li>';
    }
    console.log(list3);
    $("#list3").html(list3);

});

假设您要保留现有列表，列表具有相同数量的列表项。 http://jsfiddle.net/j942pk94/1/

从两个<ul>中交错<li>元素

4 个答案: