jquery - 将多个 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

可能有一个聪明的（er）方法可以做到这一点，但简单的迭代应该可以让你到达那里：

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

​在这里摆弄

Answer 2

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

小提琴

Answer 3

$('.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')
}))​;​

Answer 4

尝试这个

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

演示。

Answer 5

这是一个简单的答案

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