jquery - 将多个 UL 合并为一个 UL

Question

如何将多个uls 合并为一个ul？

例如，我如何结合以下内容。

<ul>
 <li>one</li>
 <li>two</li>
</ul>

<ul>
 <li>three</li>
</ul>

<ul>
 <li>four</li>
</ul>

<ul>
 <li>five</li>
</ul>

对于这样的事情

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>
​

​</p>

Answer 1

最棒的.append()地方.appendTo()在于它们会移动现有的 DOM 元素，而不是像你想象的那样复制它们：

$('ul').children('li').appendTo('ul:first'); // move all LIs to the first UL
$('ul').not(':first').remove(); // delete the extra ULs

根据需要自定义'ul'选择器；我建议使用通用类而不是通用标签选择器。

http://jsfiddle.net/j76Lu/

稍微优化（感谢，adeneo）：

$('ul').not(':first').remove().children('li').appendTo('ul:first');

​http://jsfiddle.net/j76Lu/1/

甚至更好：

$('ul:gt(0)').remove().children('li').appendTo('ul:eq(0)');

​http://jsfiddle.net/j76Lu/2/

Answer 2

$('<ul />').append($('ul').remove().children('li')).appendTo('body');

小提琴 ​</p>

Answer 3

var newUl = $('<ul>');    
$('ul').each(function() { 
       $(this).find('li').each(function() { 
            newUl.append($(this))
       });
       $(this).remove();
    });
$('selector').append(newUl);