从集合中取出n个元素

我确定它不是一个特定的jQuery问题，但我用它来实现我的任务，因此我将在jQuery和HTML的上下文中描述我需要的东西。我有一个由服务器生成的div的HTML页面。他们看起来像从集合中取出n个元素

<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'); 现在我需要从collection中取得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个元素的原则。谢谢。

来源

2010-11-03 Sergei Basharov

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

即使我最初的回答只是意味着是一个暗示;）

来源

2010-11-03 20:46:46 pex

哇，5行：] – Harmen 2010-11-03 20:48:29

+1这是比我的更完整的解决方案，但我更喜欢'slice（0,8）'到'find'。很高兴知道'detach' :) – theazureshadow 2010-11-03 20:54:44

这是错误的几个原因。 1）使用'.find（）'对选择器找到的项目没有影响。 2）使用'.detach（）'不会将它们从jQuery对象中移除，所以你将会有一个无限循环。 3）你把所有的东西都附加到同一个容器中，所以你最后的效果和原来的一样。你可能只需要'jQuery（'。image'）。appendTo（'＃container'）'。 – user113716 2010-11-03 21:03:18

我认为你可以使用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返回一个空数组，则表示完成。

来源

2010-11-03 20:50:02 theazureshadow

这似乎工作正常。

实施例：http://jsfiddle.net/kQ4Vp/（I改变的例子从容器类取出+ (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。不知道为什么我一开始就这样。

来源

2010-11-03 20:50:03 user113716

首先，这段代码假设所有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来计算组数。

最后，对每个组的这些元素调用切片，并用类“容器y”包装一个div。

来源

2010-11-03 21:56:24

如果它只是包装，这是一个聪明的！ – pex 2010-11-03 22:06:36

从集合中取出n个元素

回答

相关问题