将许多ul元素压缩成一个

Question

我的html生成如下：

 <div class="tags">
    <ul>
        <li>Red</li>
        <li>Green</li>
    </ul>

    <ul>
        <li>Blue</li>
        <li>Yellow</li>
    </ul>

</div>

什么是去掉额外ul元素并凝聚成一个元素的最佳方法。例如：

 <div class="tags">
    <ul>
        <li>Red</li>
        <li>Green</li>
        <li>Blue</li>
        <li>Yellow</li>
    </ul>

</div>

非常感谢

Answer 1

可能有一种聪明的方法可以做到，但是简单的迭代应该让你到达那里：

$result = $('<ul></ul>');
$('ul').each(function() {
  $(this).children('li').appendTo($result);
});
$('.tags').empty().append($result);

小提琴here

Answer 2

$('.tags li').appendTo('.tags > ul:first-child');
$('.tags > ul:not(:first-child)').remove();

FIDDLE

Answer 3

试试这个

$('div.tags').html($('<ul></ul>').html($('div.tags ul li')));

DEMO.

Answer 4

这是一个简单的答案

var thisUL = $('ul').eq(0);
    $('li').each(function() {
    $(this).appendTo(thisUL);
      $('ul').each(function() {
       var elem = $(this);
         if (elem.children().length == 0) {
          elem.remove();
         }
     });
   });

Answer 5

$('.tags ul:eq(0)' )  // targeting first ul
    .append( $('.tags ul:gt(0) li') )  // append all children of other ul
    .parent()  // jump to .tags
    .find('ul:gt(0)')  // target all ul accept first
    .remove(); ​// remove those ul​​​​​​​​​​​​​​​​​​​​​​​​​​​

或

$('.tags').html($('<ul/>', {
    html: $('.tags ul li')
}))​;​