Question

我有一个无序列表，其中包含大约25个列表项，每个列表项后面有不同的类。示例如下。

<ul>
    <li class="foo1">Hello</li>
    <li class="foo1">Hello</li>
    <li class="foo1">Hello</li>
    <li class="foo1">Hello</li>
    <li class="foo1">Hello</li>
    <li class="foo2">Hello</li>
    <li class="foo2">Hello</li>
    <li class="foo2">Hello</li>
    <li class="foo2">Hello</li>
    <li class="foo2">Hello</li>
</ul>

我需要在ul中将每个5个列表项包装在该类中。这些列表项由CMS输出，因此我无法自行编码。我知道我可以在类上使用jquery .wrap（），但是这会将每个列表项包装在ul中。那么如何包装具有ul？

类的5个列表项呢？

输出应为：

<ul>
    <ul>
        <li class="foo1">Hello</li>
        <li class="foo1">Hello</li>
        <li class="foo1">Hello</li>
        <li class="foo1">Hello</li>
        <li class="foo1">Hello</li>
    </ul>
    <ul>
        <li class="foo2">Hello</li>
        <li class="foo2">Hello</li>
        <li class="foo2">Hello</li>
        <li class="foo2">Hello</li>
        <li class="foo2">Hello</li>
    </ul>
</ul>

Answer 1

您正在寻找$('.foo1').wrapAll('<ul/>');

添加了一个jsfiddle，它可以找到ul中的类并将它们包装起来（如果你不知道内部类名是什么）。

function classList(elem){
    var classes = [];
    $.each( elem, function(index,item) {
        elemClasses = $(item).attr('class').split(/\s+/);
        $.each(elemClasses, function(index,item) {
           if(classes.indexOf(item) === -1) classes.push(item);
        });
    });
    return classes;
}

$.each(classList($('ul li')), function(index, item) {
    $('.' + item).wrapAll('<ul/>');
});

http://jsfiddle.net/bhlaird/C5Dzn/

Answer 2

您还可以循环浏览wrap them：

for(var i = 1; i <= 2; i++)
{
    $('.foo'+i).wrapAll('<ul/>');
}

或者，如果你不知道会有多少：

var i = 1;
while($('.foo'+i).length > 0)
{
    $('.foo'+i).wrapAll('<ul/>');
    i++;
}

使用HTML包装类的组

2 个答案: