使用 Javascript 为每 5 个元素插入 <div>

Insert <div> for every 5 elements using Javascript

提问by cusejuice

I have a simple list of images that is being controlled via a CMS (ExpressionEngine). Like this:

我有一个通过 CMS (ExpressionEngine) 控制的简单图像列表。像这样：

<div class="wrapper">
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
</div>

What I want to do is for every 5 images, wrap them in a div with a class of "slide." To look like this:

我想要做的是每 5 张图像，将它们包装在一个带有“幻灯片”类的 div 中。看起来像这样：

<div class="wrapper">
    <div class="slide">
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
    </div>
    <div class="slide">
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
      <a href="#"><img src="#" /></a>
    </div>
</div>

The reason I am not manually coding the "" in is because of a jQuery content slider that I am using which requires every 5 images to be wrapped inside a slide div.

我没有手动编码 "" 的原因是我使用的 jQuery 内容滑块要求每 5 个图像包装在幻灯片 div 中。

I'm not sure how what the code in ExpressionEngine would be to do this, but I figure it might just be easier to use Javascript to wrap every 5 images with the div. And to just have ExpressionEngine output the different images all at once.

我不确定 ExpressionEngine 中的代码将如何执行此操作，但我认为使用 Javascript 将每 5 个图像与 div 包装在一起可能会更容易。并且只让 ExpressionEngine 一次输出不同的图像。

Any help?

有什么帮助吗？

回答by user113716

Here's one way:

这是一种方法：

Example:http://jsfiddle.net/T6tu4/

示例：http : //jsfiddle.net/T6tu4/

$('div.wrapper > a').each(function(i) {
    if( i % 5 == 0 ) {
        $(this).nextAll().andSelf().slice(0,5).wrapAll('<div class="slide"></div>');
    }
});

Here's another way:

这是另一种方式：

Example:http://jsfiddle.net/T6tu4/1/

示例：http : //jsfiddle.net/T6tu4/1/

var a = $('div.wrapper > a');

for( var i = 0; i < a.length; i+=5 ) {
    a.slice(i, i+5).wrapAll('<div class="slide"></div>');
}

回答by Guffa

You can just create a div for every fith element and move the links into them using the appendmethod:

您可以为每个 fith 元素创建一个 div 并使用以下append方法将链接移动到它们中：

var wrapper = $('.wrapper');
var div;
$('a', wrapper).each(function(i,e){
    if (i % 5 == 0) div = $('<div/>').addClass('slide').appendTo(wrapper);
    div.append(e);
});

Demo: http://jsfiddle.net/Guffa/ybrxu/

演示：http: //jsfiddle.net/Guffa/ybrxu/

回答by Mark Schultheiss

I think this would do that:

我认为这会做到这一点：

var links = $('.wrapper').children();
for (var i = 0, len = links.length; i < len; i += 5) {
    links.slice(i, i + 5).wrapAll('<div class="slide"/>');
}

回答by Chandu

Try this:

试试这个：

$(function(){
    var curDiv = null;
    var mainDiv = $("div.wrapper");
    $("span", mainDiv).each(function(i, b){
        if(i%5 == 0) {
            curDiv = $("<div class='slide'/>").appendTo(mainDiv);
        }
        curDiv.append(b);
    });
});

回答by bcoughlan

Use slice() to select the element subset then wrapAll() to wrap the div around them. Here's a function that does that.

使用 slice() 选择元素子集，然后使用 wrapAll() 将 div 包裹在它们周围。这是一个可以做到这一点的函数。

var wrapEveryN = function(n, elements, wrapper) {
   for (var i=0; i< elements.length; i+=n) {
       elements.slice(i,i+n).wrapAll(wrapper);
   }
}

wrapEveryN( 5, $(".wrapper a"), '<div class="slide"></div>' );

Demo: http://jsfiddle.net/C5cHC/

演示：http: //jsfiddle.net/C5cHC/

Note that the second parameter of slice may go out of bounds, but jQuery seems to handle this automatically.

请注意， slice 的第二个参数可能会越界，但 jQuery 似乎会自动处理。

回答by Ahmad Alfy

You need to use jQuery slicewith wrap

您需要使用带有 wrap 的jQuery slice

Check this question

检查这个问题