Question

我有一个包含一定数量的img的div。让我们说21.我想做的是每9个img包围一个div。我能以什么方式实现这一目标？

我的html结构：

<div id="parent">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
   <img src="#">
</div>

应该成为：

<div id="parent">
   <div>
      <img src="#">
      <img src="#">
      <img src="#">
      <img src="#">
      <img src="#">
      <img src="#">
      <img src="#">
      <img src="#">
      <img src="#">
   </div>
   <div>
      <img src="#">
      <img src="#">
      <img src="#">
      <img src="#">
      <img src="#">
      <img src="#">
   </div>
</div>

Answer 1

你可以这样做：

var $img = $("#parent img");
for (var i = 0; i < $img.length; i += 9) {
    $img.slice(i, i + 9).wrapAll("<div/>");
}

FIDDLE DEMO

Answer 2

这不是纯粹的jQuery，但有效：http://jsfiddle.net/GEQyA/

HTML：

<div id="parent">

<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>
<img src="" class="image"/>

JS：

var $images = [];
$('#parent').children().each(function(index, value){
$images.push(this);
});
$('#parent').children().each(function(index, value){
$(this).remove();
});

$('#parent').ready(function(){
write();
});

function write() {
var counter = 0;

$('#parent').append('<div class="innerDiv">');
$($images).each(function(index, value){
    if (counter == 2) {
        $('#parent').append('</div><div class="innerDiv">');
        counter = 0;
    }

    $('#parent').append($(this) + counter);

    if (index == $images.length) {
        $('#parent').append('</div>');
    }
    counter += 1;
});
}

纯粹的jquery方法，用于将每个9 img包装在div中

2 个答案: