插入使用 Javascript 每 5 个元素

Question

我有一个通过 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>

我想要做的是每 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>

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

我不确定 ExpressionEngine 中的代码是如何做到这一点的，但我认为使用 Javascript 用 div 包装每 5 个图像可能会更容易。并且让 ExpressionEngine 一次性输出不同的图像。

有什么帮助吗？

Answer 1

这是一种方法：

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

这是另一种方式：

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

Answer 2

您只需为每个第五个元素创建一个 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);
});

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

Answer 3

我认为这会做到这一点：

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

Answer 4

试试这个：

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

Answer 5

您需要使用 jQuery slice 和换行

检查 这个问题

Answer 6

使用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>' );

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

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