从各种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将li添加到带有clone()

的新ul

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