jQuery 通过 <i> 将列表拆分和重组为新列表答案

【问题标题】：jQuery split and regroup list by <i> into new listsjQuery 通过 <i> 将列表拆分和重组为新列表
【发布时间】：2014-08-14 13:26:48
【问题描述】：

我尝试将下面的 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 部分是没用的。非常感谢您帮助我完成这项任务！

【问题讨论】：

标签： javascript jquery html list split

【解决方案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

【讨论】：

非常感谢，这就是我寻找的解决方案！

【解决方案2】：

由于我们不能对多个元素使用相同的id，因此我将theListFilter 用作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);

jsFiddle

【讨论】：

【解决方案3】：

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

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

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

detach() #theListFilter，然后在其中找到并循环每个 i，将它们的父 li 和所有兄弟 li 包裹起来，直到下一个包含 i 的 li一个ul。

Here's a fiddle

编辑

上述更优化的版本：

var $listContent = $('#theListFilter').detach(),
    newContent = [];

$listContent.find('i').each(function(i) {
    newContent[i] = $(this).parent().nextUntil('li:has(i)').addBack().wrapAll('<ul class="column' + (i+1) + '">').parent();
});

$('#scrollerFilter').append( newContent );

Here's another fiddle

【讨论】：

【解决方案4】：

检查一下

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)

【讨论】：