Question

我的html中可能有任意数量的文章：

<div id="main">
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</div>

现在，我想分成一组所有文章。

var group = parseInt($('#main article').length / 3, 10); // results 4

现在，我如何用一个小组中的四篇文章包装它？

结果应该是这样的：

<div id="main">
  <div class="group">
     <article></article>
     <article></article>
     <article></article>
     <article></article>
  </div>
  <div class="group">
     <article></article>
     <article></article>
     <article></article>
     <article></article>
  </div>
  <div class="group">
     <article></article>
     <article></article>
     <article></article>
     <article></article>
  </div>
  <div class="group"><!--the remaining two articles-->
     <article></article>
     <article></article>
  </div>
</div>

Answer 1

尝试一个简单的for循环

var $articles = $('#main article'),
    length = $articles.length;
for (var i = 0; i < length; i = i + 4) {
    $articles.slice(i, i + 4).wrapAll('<div class="group"/>')
}

演示：Fiddle

Answer 2

尝试，

while($('#main > article').length > 0)
{
    $('#main > article:lt(4)').wrapAll('<div class="group"></div>');
}

DEMO

Answer 3

        var group = parseInt($('#main article').length / 3, 10); // results 4
        var grpCount = Math.ceil($('#main article').length / group);

        for(var i=0 ; i < grpCount ;i++){
            if(i == 0) {
                $('#main article:lt('+group+')').wrapAll("<div class='group'></div>")
            } else if( i == (grpCount-1)) {
                $('#main article:gt('+parseInt((group*i)-1)+')').wrapAll("<div class='group'></div>")
            } else {
                $('#main article:lt('+parseInt(group*(i+1))+'):gt('+parseInt((group*i)-1)+')').wrapAll("<div class='group'></div>")
            }


        }

Answer 4

您也可以尝试.each() jquery函数：

var articles = $('#main').find('article');

$.each(articles, function(i, el) {
  if(i % 4 == 0) {
    articles.slice(i , i+4).wrapAll('<div class="group">');
  }
});

DEMO

我如何分组包装标签？

4 个答案:

DEMO