jquery - 複数の UL を 1 つの UL に結合する

Question

ul複数の を 1 つに結合するにはどうすればよい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()andの優れた点.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);