Получить все элементы списка из различных элементов ul - объединить их все в новую ul

Question

Мне нужно получить все элементы списка из 4 различных элементов ul и добавить все элементы списка в новую ul.

Скажем, у меня есть этот HTML:

<nav id="nav"> 
    <ul> 
     <li>One</li> 
     <li>One</li> 
     <li>One</li> 
    </ul> 
    <ul> 
     <li>Two</li> 
     <li>Two</li> 
     <li>Two</li> 
    </ul> 
</nav> 
<ul id="three"> 
    <li>three</li> 
    <li>three</li> 
    <li>three</li> 
</ul> 
<ul id="four"> 
    <li>four</li> 
    <li>four</li> 
    <li>four</li> 
</ul> 

Я пытался с этим:

var $three = $('#three').children().clone(); 
var $four = $('#four').children().clone(); 
$("#nav li").each(function(index, element) { 
    var lists = $(this); 
}); 

$("#result").append(lists).add($three).add($four); 

- но, очевидно, она не работает. Как это может быть сделано? Jsfiddle здесь.

Answer 1

Вы можете просто сделать

$("#result").append($("#nav li, #three li, #four li").clone()); 

См https://jsfiddle.net/7fxs91bb/2/

Answer 2

Попробуйте это:

var $result = $('#result'); 
$('ul').each(function(i, el) { 
    $(el).find('li').each(function(i, el) { 
     $result.append(el); 
    }); 
}); 

Answer 3

Попробуйте это: Используйте Append, чтобы добавить Ли к новому ул с clone()

$(function(){ 
 
var $result = $('#result'); 
 
$result.append($('#nav ul li').clone()); 
 
$result.append($('#three li').clone()); 
 
$result.append($('#four li').clone()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="nav"> 
 
    <ul> 
 
     <li>One</li> 
 
     <li>One</li> 
 
     <li>One</li> 
 
    </ul> 
 
    <ul> 
 
     <li>Two</li> 
 
     <li>Two</li> 
 
     <li>Two</li> 
 
    </ul> 
 
</nav> 
 
<ul id="three"> 
 
    <li>three</li> 
 
    <li>three</li> 
 
    <li>three</li> 
 
</ul> 
 
<ul id="four"> 
 
    <li>four</li> 
 
    <li>four</li> 
 
    <li>four</li> 
 
</ul> 
 
<ul id="result"></ul>

Answer 4

Попробуйте следующее:

$('ul li').each(function(i,o){ 
    $("#result").append($(o).clone()); 
}); 

Answer 5

Пожалуйста, проверьте ниже фрагмент кода.

$(document).ready(function(){ 
 
    var all_lis = ''; 
 
    $('ul').each(function(){ 
 
    all_lis += $(this)[0].outerHTML; 
 
    }); 
 
    //console.log(all_lis); 
 
    $("#result").html(all_lis); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="nav"> 
 
    <ul> 
 
     <li>One</li> 
 
     <li>One</li> 
 
     <li>One</li> 
 
    </ul> 
 
    <ul> 
 
     <li>Two</li> 
 
     <li>Two</li> 
 
     <li>Two</li> 
 
    </ul> 
 
</nav> 
 
<ul id="three"> 
 
    <li>three</li> 
 
    <li>three</li> 
 
    <li>three</li> 
 
</ul> 
 
<ul id="four"> 
 
    <li>four</li> 
 
    <li>four</li> 
 
    <li>four</li> 
 
</ul> 
 
<ul id='result'></ul>

Answer 6

Это можно сделать так:

$(document).ready(function() { 
 
    $("#result").append($("li").clone()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="nav"> 
 
    <ul> 
 
    <li>One</li> 
 
    <li>One</li> 
 
    <li>One</li> 
 
    </ul> 
 
    <ul> 
 
    <li>Two</li> 
 
    <li>Two</li> 
 
    <li>Two</li> 
 
    </ul> 
 
</nav> 
 
<ul id="three"> 
 
    <li>three</li> 
 
    <li>three</li> 
 
    <li>three</li> 
 
</ul> 
 
<ul id="four"> 
 
    <li>four</li> 
 
    <li>four</li> 
 
    <li>four</li> 
 
</ul> 
 
<ul id="result"> 
 
</ul>