javascript - jQuery 按 将列表拆分并重组为新列表

Question

我尝试将下面的 html 列表拆分成多个列表，按标题分组，标题只是在列表中用 标记。我对 html 没有影响，所以我必须使用 jquery 重新格式化它。列表组的长度是可变的。

<div id="scrollerFilter">
<ul id="theListFilter">
    <li class="selected">All</li>
    <li><i>Industrial filter</i></li>
        <li>bla 1</li>
        <li>bla 2</li>
        <li>bla 3</li>
        .....
        <li>bla 6235</li>
    <li><i>Functional filter</i></li>
        <li>bla 1</li>
        <li>bla 2</li>
    <li><i>Regional filter</i></li>
        <li>bla 1</li>
        <li>bla 2</li>
        <li>bla 3</li>
        <li>bla 4</li>
        <li>bla 5</li>
        <li>bla 6</li>
</ul>
</div>

我需要 jquery 将列表拆分为多个列表，用作标题/组标识符。结果应如下所示:

<div id="scrollerFilter">
<ul id="theListFilter" class="column1">
    <li><i>Industrial</i></li>
        <li>bla 1</li>
        <li>bla 2</li>
        <li>bla 3</li>
        .....
        <li>bla 6235</li>
</ul>
<ul id="theListFilter" class="column2">
    <li><i>Functional</i></li>
        <li>bla 1</li>
        <li>bla 2</li>
</ul>
<ul id="theListFilter" class="column3">
    <li><i>Regional</i></li>
        <li>bla 1</li>
        <li>bla 2</li>
        <li>bla 3</li>
        <li>bla 4</li>
        <li>bla 5</li>
        <li>bla 6</li>
</ul>
</div>

我已经找到了如何按计数拆分静态列表并将其重新组合，而不是将其移动到另一个 div 并删除旧的，但这不是一个选项，因为列表组在变化并且重新定位到另一个 div没有必要。

var total = $("#scrollerFilter li").size();
var count = 4;
var column = 0;
for (var i = 0; i < total; i += count) {
column++;
$("#newDIV").append('<ul id="columns' + column + '"></ul>');
$("#columns" + column).html($("#scrollerFilter li").splice(0, count));
}
$("#scrollerFilter").remove();

所以这个jquery部分是没用的。非常感谢您帮助我完成这项任务!

Answer 1

试试下面的 jQuery :

$(function(){
    var $ulelement;
    $('#theListFilter li').each(function(index){
        if($(this).children("i").length>0)
        { 
            $ulelement = $('<ul id="theListFilter'+index+'" class="column1"></ul>');
            $ulelement.appendTo('#scrollerFilter');
        }
       $(this).appendTo($ulelement);
       if($('#theListFilter').is(':last-child')) // remove first ul
          $('#theListFilter').remove();
    });
});

Working JSFiddle