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

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