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，但这不是一个选项，因为列表组是变量的，并且是对另一个的重新发送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

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

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＆＃39; s直到li中包含i的下一个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

Answer 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

Answer 3

检查这个

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)

Answer 4

尝试下面的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

jQuery将<i>拆分并重新组合到新列表中</i>

4 个答案:

Here's a fiddle

Here's another fiddle