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

时间:2015-05-10 22:33:35

标签: jquery

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

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

提前致谢

4 个答案:

答案 0 :(得分:3)

您只需使用after方法:

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

Here is a demo.

答案 1 :(得分:0)

试试这个 - 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();

答案 2 :(得分:0)

假设你想保留相同的订单,那怎么样?

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/

答案 3 :(得分:0)

这个怎么样:

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/