Question

我确信这不是一个特定的jQuery问题，但我用它来实现我的任务，所以我将在jQuery和HTML的上下文中描述我需要的东西。我有一个HTML页面，其中包含由服务器生成的div。他们看起来像

<div class="image"><img src="image1.png" /></div>
<div class="image"><img src="image2.png" /></div>
...
<div class="image"><img src="imagen.png" /></div>

div的计数是可变的，例如，可以是40-50。我用这样的东西收集它们：images = jQuery('.image'); 现在我需要从集合中获取每9个div并将它们放在一个新创建的容器中，例如，像这样：

<div class="container1">
<div class="image"><img src="image1.png" /></div>
<div class="image"><img src="image2.png" /></div>
<div class="image"><img src="image3.png" /></div>
...
<div class="image"><img src="image9.png" /></div>
</div>

然后我需要接下来的9个元素并将它们放在一个类似的新创建的div中，如下所示：

<div class="container2">
<div class="image"><img src="image10.png" /></div>
<div class="image"><img src="image11.png" /></div>
<div class="image"><img src="image12.png" /></div>
...
<div class="image"><img src="image18.png" /></div>
</div>

这样我需要获取所有元素并将它们放在新创建的容器中。最后，我将有几个容器，每个容器包含9个元素。显然，如果图像div的总量不是9的倍数，则最后一个容器可以具有更少的元素。我不是要求一个完整的解决方案，但我需要实现从一个集合中获取每个9个元素的原则。感谢。

Answer 1

FIX！

..感谢所有的评论。此工作版本基于patrick dw的方法。希望这会有所帮助..

var images = jQuery('.image');
for(i = 0; i < images.length / 9; i++) {
 jQuery('<div />', {
   id: 'conainter_' + i,
   html: images.slice(i*9, i*9+9)
 }).appendTo('body');
}

即使我最初的答案仅仅是一个暗示;）

Answer 2

这似乎工作正常。

示例： http://jsfiddle.net/kQ4Vp/ （我更改了示例以从容器类中删除+ (i / 9)以更轻松地设置显示结果的容器样式。）

var $images = $('.image'); // get all the elements with the class "image"
var i = 0; // Start counter at 0. It will increment by 9: 0, 9, 18, etc.

 // Run a loop while "i" is less than the total number of images
while ( i < $images.length ) {

     // Create a new div, giving it a class "container0" "container1" etc.
    $('<div>', {'class':'container' +  (i / 9)})

            // Take a slice of the images from the current "i" thru "i + 9"
            //  so, 0-9, 9-18, 18-27, etc. and append them to the new div
        .append( $images.slice(i, i + 9) )

        .appendTo( 'body' );  // Append the new div to the body (or wherever)

    i += 9; // Increment "i" by 9
}

编辑：将其更改为使用while而不是do/while。不知道我为什么一开始就这么做。

Answer 3

我认为您可以使用slice和end效果良好：

var pars = $('p');
pars.slice(0,4);
// do something with it, such as append()
pars.end().slice(5,9);
// do something with this slice, etc

如果pars.slice返回一个空数组，那么就完成了。

Answer 4

首先，此代码假定所有div都是DOM中的兄弟姐妹。

var $images = $(".image"),
    len = 9;

for (var x = 0, y = 1; x < $images.length; x += len, y++) {
    $images.slice(x, x + len).wrapAll('<div class="container' + y + '" />');
}

基本上，您检索所有.image元素，然后设置每个容器的长度。

然后启动循环，开始使用x计算元素数量，y计算组数。

最后，在每个组的元素上调用slice，并使用类“container y”包装div。

从集合中取出n个元素

4 个答案: