Javascript jQuery根据<；拆分和重新组合列表；i>；进入新名单

我尝试将下面的html列表拆分为多个列表，按标题分组，标题只是在列表中用a标记。我对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>

所有
工业过滤器
bla 1
bla 2
bla 3
.....
bla 6235
功能滤波器
bla 1
bla 2
区域过滤器
bla 1
bla 2
bla 3
bla 4
bla 5
bla 6

我需要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>

var $listContent = $('#theListFilter').detach();

$listContent.find('i').each(function() {
    $('<ul>').append( $(this).parent().nextUntil('li:has(i)').addBack() ).appendTo('#scrollerFilter');
});

工业的
bla 1
bla 2
bla 3
.....
bla 6235


功能性
bla 1
bla 2


区域性
bla 1
bla 2
bla 3
bla 4
bla 5
bla 6

我allready找到了如何按计数拆分静态列表并对其进行重新分组，然后将其移动到另一个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();

var total=$（“#scrollerFilter li”）.size（）；
var计数=4；
var列=0；
对于（变量i=0；i”）；
$（“#columns”+column）.html（$（“#scrollerFilter li”）.splice（0，count））；
}
$（“#scrollerFilter”）.remove（）；

所以这个jquery部分是无用的。 非常感谢你在这项任务上帮助我

检查这个

var markup = $('#scrollerFilter').html().split('<li><i>'),
    tmp;
for (var i = 0; i < markup.length; i++) {
    if (markup[i] != undefined)
        tmp += '<ul id="theListFilter" class="column' + (i + 1) + '">' + markup[i] + '</ul>';
}
$('#scrollerFilter').html(tmp)

var markup=$（'#scrollerFilter'）.html（）.split（'
'），
tmp；
for（var i=0；i“+markup[i]+'”；
}
$（'#scrollerFilter'）.html（tmp）

试试下面的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();
    });
});

$（函数（）{
var$ulelement；
$（'#列表过滤器li'）。每个（函数（索引）{
如果（$（此）.children（“i”）.length>0）
{ 
$ulelement=$（'
）；
$ulelement.appendTo（“#scrollerFilter”）；
}
$（this.appendTo（$ulelement）；
if（$（“#theListFilter”）.is（“：last child”）//删除第一个ul
$（“#列表过滤器”）.remove（）；
});
});

---

未优化，但您可以执行以下操作：

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

var $listContent = $('#theListFilter').detach();

$listContent.find('i').each(function() {
    $('<ul>').append( $(this).parent().nextUntil('li:has(i)').addBack() ).appendTo('#scrollerFilter');
});

---

由于我们不能对多个元素使用相同的

id

，因此我将使用

listfilter

As

class

试试这个：

var theListFilter = $('#theListFilter');
var theListFilterClone = theListFilter.clone();
var scrollerFilter = $('#scrollerFilter');
var column = 0;
var ul = $('<ul>');
theListFilter.remove('');
theListFilterClone.find('li').each(function(i, v) {
    li = $(v);
    if (li.html() === 'All') {
        return;
    }
    if (li.find('i').length) {
        li.find('i').html(li.find('i').html().replace(' filter', ''));
        if (i > 1) {
            column++;
            ul.addClass('theListFilter cloumn' + column);
            scrollerFilter.append(ul);
            ul = $('<ul>');
        }
    }
    ul.append(li);
});
column++;
ul.addClass('cloumn' + column);
scrollerFilter.append(ul);

var-theListFilter=$（'#theListFilter'）；
var theListFilterClone=theListFilter.clone（）；
var scrollerFilter=$（“#scrollerFilter”）；
var列=0；
var ul=$（“
”）；
列表过滤器。移除（“”）；
ListFilterClone.find（'li'）。每个函数（i，v）{
li=$（v）；
如果（li.html（）=='All'）{
返回；
}
if（li.find（'i'）.length）{
li.find（'i'）.html（li.find（'i'）.html（）.replace（'filter'，''）；
如果（i>1）{
列++；
ul.addClass（'listfilter cloumn'+列）；
scrollerFilter.append（ul）；
ul=$（“
”）；
}
}
ul.附加（li）；
});
列++；
ul.addClass（'cloumn'+列）；
scrollerFilter.append（ul）；

---

非常感谢，这是我搜索的解决方案！