Question

我有10个来自JSON数据的div，我想在每2个div之后添加一个div。我的HTML代码就像这样

<div class="imgs">
    <div class="fixed">1</div>
    <div class="fixed">2</div>
    <div class="fixed">3</div>
    <div class="fixed">4</div>
    <div class="fixed">5</div>
    <div class="fixed">6</div>
    <div class="fixed">7</div>
    <div class="fixed">8</div>
    <div class="fixed">9</div>
    <div class="fixed">10</div>
</div>

是否可以将父div中的div分组？

<div class="imgs"> 
    <div class="set">
        <div class="fixed">1</div>
        <div class="fixed">2</div>
    </div>
    <div class="set">
        <div class="fixed">3</div>
        <div class="fixed">4</div>
    </div>
  ...
</div>

Answer 1

Working demo

您尚未发布JSON，因此此解决方案适用于您提供的HTML。

您需要选择div.fixed，将它们分成两部分，创建每个div.set，将这些元素移入其中并将其放入.imgs。您不需要清除这些div的.imgs因为追加实际上将每个项目从它们所在的位置移动到您指定的位置。

$(function(){
    $('.imgs').each(function(){
        var $imgs=$(this);
        var $children=$(this).children();
        var $chunks=chunk($children, 2);
        $.each($chunks, function(){
            $('<div class="set">').append(this).appendTo($imgs);
        });
    });
});

function chunk (arr, len) {
  var chunks = [],
      i = 0,
      n = arr.length;
  while (i < n) {
    chunks.push(arr.slice(i, i += len));
  }
  return chunks;
}

Answer 2

var json = yourjson;
var set = 2;
var html = "";
for(var i = 0; i < json.length; i++){
   if (set++ == 2){
      set = 0;
      if (i != 0) // close only if one has been open
         html += "</div>";
      html += "<div class='set'>";
   }
   html += "<div class='fixed'>"+json[i]+"</div>"; // add .fixed
}
html += "</div>"; // close last .set

$("#container").html(html);

Answer 3

更简单的方法：

while($('.imgs > .fixed').length) {
    $('.imgs > .fixed:lt(2)').wrapAll('<div class="set">');
}

http://jsfiddle.net/jtbowden/XW659/

或者：

$('.imgs .fixed:even').each( function() {
   $(this).next().addBack().wrapAll('<div class="set">'); 
});

http://jsfiddle.net/jtbowden/VzgQC/

多个div，包含2行和无限列

3 个答案: