Question

我有ul个li元素，我想要做的是：

如果有6个或更少li个元素，请将它们全部选中并将它们放入新的ul。
对于任何大于6个元素的数字，循环浏览，选择6个元素，放入新的ul，从下一个li元素开始并继续。
如果最后剩下的元素少于6个，那么它们也会被放入新的ul。

如果我从5个li元素开始，我希望最终得到1个ul元素和5个li个元素。

如果我开始使用40个li元素，我希望最终得到7个ul个元素，6个有6个li个子元素，1个有4个元素。

在jQuery中处理这个问题最有效的方法是什么？

Answer 1

您可以通过循环并.slice()与.wrapAll()一起使用来完成此操作，如下所示：

var lis = $("#myUL li");
for(var i = 0; i < lis.length; i+=6) {
  lis.slice(i, i+6).wrapAll("<li><ul></ul></li>");
}

You can test it out here。请注意，此版本在原始内容中创建嵌套 <ul>元素（在其自己的<li>内，因此它有效）。如果您不想这样，并希望首先替换原始<ul>，.unwrap()，请执行以下操作：

var lis = $("#myUL li").unwrap();
for(var i = 0; i < lis.length; i+=6) {
  lis.slice(i, i+6).wrapAll("<ul></ul>");
}

You can test that version here

Answer 2

我建议您跟踪UL内部有多少元素。例如，您可以在页面顶部设置如下的全局变量：

<script type="text/javascript">
var listItems = 0;
</script>

每当新项目添加到列表时增加该变量。如果在循环访问PHP数组（或其他语言的等效语句）时添加它们，请执行以下操作：

<? foreach ($items as $item):?>
  <script type="text/javascript">
  listItems++;
  </script>
  <li><?=$item;?>
<?endforeach;?>

如果通过javascript添加，请执行以下操作：

function addToList(item)
{
   listItems++;
   $("#list").append("<li>" + item + "</li>");
}

然后，您可以使用该变量来确定ul中有多少元素，例如：

if (listItems < 6)
   //Do something
else
   // Do something else

Answer 3

这是另一种解决方案。

var lis = $('#myul li:eq(0), #myul li:nth-child(6n+1)'), // get first and 6n+1
    result = $('#result');

lis.each(function(el, i){
    var nextSix = $(this).nextAll(':lt(5)').andSelf().clone(); // take next 6 copy
    $('<ul/>').append(nextSix) // create new ul add lis
        .appendTo(result); // add to container
});

http://jsfiddle.net/9GFf6/

在jQuery中一次选择n个元素的最佳方法

3 个答案: