Question

我有无序列表组，我试图将每个列表组动态划分为3个子组。到目前为止，我有这个：

var uls = $("ul > li");
for(var i = 0; i < uls.length; i+=3) {
uls.slice(i, i+3).wrapAll("<ul class='new'></ul>");
}

...对于下面的一些示例HTML

<h2>Group 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

<h2>Group 2</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>

我遇到的问题是我的代码只是将所有<ul>放在一起而不考虑群组，即“群组1”群组2'我尝试在.each(function() {上使用$("ul > li")但我只是得到错误。我也试过在.length之后向下移动每个函数，但这也没有用。

所以最终的HTML看起来像这样：

<h2>Group 1</h2>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ul>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

<h2>Group 2</h2>
    <ul>
etc...

My fiddle is here但是你可以看到它还没有完成。

Answer 1

这是怎么回事？ http://jsfiddle.net/4Bms6/

$('ul').each(function(){
    var uls = $("li", this);

    for(var i = 0; i < uls.length; i+=3) {

    var lis = $("li", this);

        uls.slice(i, i+3).wrapAll("<ul class='new'></ul>");
    }
});

你得到错误分组的原因是因为你开始收集每一个li（“ul＆gt; li”等同于任何ul的孩子的所有li）。你应该做的是选择每个ul的孩子的所有li，执行分组，然后继续下一个ul。

将无序列表组划分为3个子组

1 个答案: