Question

如何将多个ul合并为一个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>

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');

FIDDLE

Answer 3

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

将多个UL组合到一个UL中

3 个答案: