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

Question

我有一个 div，其中包含一定数量的 img。比方说 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/>");
}

小提琴演示

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;
});
}