0

我有一个无序列表，其中有大约 25 个列表项，每 5 个列表项之后有不同的类。下面的例子。

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

我需要将该类中的每 5 个列表项包装在 ul 中。这些列表项是由 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>
4

2 回答 2

2

您正在寻找$('.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/

于 2013-10-18T18:19:41.237 回答
0

您还可以循环并包装它们：

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

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

var i = 1;
while($('.foo'+i).length > 0)
{
    $('.foo'+i).wrapAll('<ul/>');
    i++;
}
于 2013-10-18T18:39:47.637 回答