Question

我需要转换成

<div id="WhateverHolder">

<div class="block">
<div class="item first"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item last"></div>
</div>

<div class="block">
<div class="item first"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item last"></div>
</div>

</div>

我已经找了一个插件可以做到这一点，但无济于事jQuery中最简单的方法是什么

Answer 1

您可以使用jQuery函数.slice(...)：

http://api.jquery.com/slice/

var items = $("#WhateverHolder > div.item");

var blockCount = 4;

for (var i = 0; i < items.length; i+= blockCount) {
    var slice = items.slice(i,i + blockCount);      

    slice.first().addClass('first');
    slice.last().addClass('last');

    slice.wrapAll("<div class=\"block\"></div>");
}

它将在第9个元素上创建一个新块。而且，无论如何都要按照你想要的第一个和最后一个课程来完成它。

Answer 2

您可以使用selectors（您可以改进这一点）：

place = $('#WhateverHolder')
place.find('div:lt(4)').wrapAll('<div class="block" />')
place.find('div:gt(4)').wrapAll('<div class="block" />')
place.find('.block').each(function (i, e) {
  e = $(e)
  e.find('div:first').addClass('first')
  e.find('div:last').addClass('last')
});

修改：可行（与您的示例一起）！（很容易使它更灵活（使用.each（）和.slice（））

Answer 3

使用jQuerys .slice()和.wrapAll()方法完成该任务。

$(function(){
   var $set = $('.item');

   for(var i = 0, len = $set.length; i < len; i+=4){
      $set.slice(i, i+4).wrapAll('<div class="block"/>');
   }
});

这会将每个four div.item 元素包装到one div.block 中。

请参阅：.wrapAll()，.slice()

示例：http://jsbin.com/ahuvu3/edit

Answer 4

var MAX_CHILDREN_PER_BLOCK = 4;
var parent = $('#WhateverHolder');
var currentBlock;
parent.find('.item').each(function() {
   if (!currentBlock) {
       currentBlock = $('<div class="block"></div>');
       currentBlock.appendTo(parent);
   }
   $(this).appendTo(currentBlock);
   if (currentBlock.children().size() == MAX_CHILDREN_PER_BLOCK) {
       currentBlock = null;
   }
});
parent.find('.block').each(function() {
   $(this).find('.item:first').addClass('first');
   $(this).find('.item:last').addClass('last');
});

编辑：在评论中解释的经过测试和解决的错误

Answer 5

这是我的2美分：

 var listItemsPerList = 10;
 var listItems = $("#WhateverHolder > div").length;

 for (var i = 0; i < Math.round(listItems / listItemsPerList); i++) {
     var startingItem = i * listItemsPerList;
     var endingItem = (i + 1) * listItemsPerList;
     if (endingItem > listItems) { endingItem = listItems };
     $("#WhateverHolder > div").slice(startingItem, endingItem).wrapAll("<div class="block"></div>");
 }

 $("#WhateverHolder").replaceWith($("#WhateverHolder").children());

以块为单位划分一些div

5 个答案: