Question

我想根据类名对现有的ul li列表进行排序，并为每个类创建新的bullit列表

现在：

    <ul>
     <li class="a"></li>
     <li class="a"></li>
     <li class="b"></li>
     <li class="b"></li>
     <li class="b"></li>
     <li class="c"></li>
    </ul>

必须转换为：

<ul>
<li class="a"></li>
<li class="a"></li>
</ul>

<ul>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
</ul>

<ul>
<li class="c"></li>
</ul>

Answer 1

您可以使用 .unwrap() 和 .wrapAll() ：

$(function(){
    $('ul li').unwrap();
    var classes = ['a', 'b', 'c'];
    for (i = 0; i < classes.length; i++) {
        $('li.' + classes[i]).wrapAll('<ul></ul>');
    }
});

<强> Fiddle Demo

Answer 2

使用map（基于Felix' solution）：

$(function(){
    $('ul li').unwrap();
    ['a', 'b', 'c'].map(function(x) {$('li.' + x).wrapAll('<ul></ul>')});   
});

JsFiddle

Answer 3

使用.unwrap()和.wrapAll()：

 $('ul li').unwrap();
 $('.a').wrapAll('<ul></ul>')
 $('.b').wrapAll('<ul></ul>')
 $('.c').wrapAll('<ul></ul>')

<强> Demo

Answer 4

无论li中的课程如何，这都适合你，即你不必知道前面的课程：

$(function () {
    var classes = new Array();
    var i = 0;
    $("li").each(function () {
        var currentClass = $(this).attr('class');
        if (classes.indexOf(currentClass) < 0) {
            classes[i] = currentClass ;
            i++;
        }
    });
    $('ul li').unwrap();
    for (i = 0; i < classes.length; i++) {
        $("." + classes[i]).wrapAll('<ul></ul>');
    }
});

Live example here

按李班排序项目符号列表

4 个答案: