0

我有一组无序列表，我试图将每个列表组动态划分为 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>s 混在一起而不考虑组，即我尝试使用的“组 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...

我的小提琴在这里，但你可以看到它还没有完全工作。

4

1 回答 1

3

这个怎么样？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 > li”等于所有 li 是任何 ul 的子级）。您应该做的是选择作为每个 ul 的子级的所有 li，执行分组，然后转到下一个 ul。

于 2012-11-21T01:55:52.103 回答