jquery - 多くの ul 要素を 1 つに凝縮する

Question

私のhtmlは次のように生成されます：

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

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

</div>

余分なul要素を取り除き、1つに凝縮する最良の方法は何ですか. 例えば：

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

ここでフィドル

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();
         }
     });
   });