9

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

<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:

<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.

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.

Any help?

cusejuice
  • 10,285
  • 26
  • 90
  • 145

6 Answers6

25

Here's one way:

Example: 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/

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

for( var i = 0; i < a.length; i+=5 ) {
    a.slice(i, i+5).wrapAll('<div class="slide"></div>');
}
user113716
  • 318,772
  • 63
  • 451
  • 440
  • @Cybernate: Thanks! I like the `for` loop one better of the two. Otherwise something like yours that changes the container every 5th iteration is a very nice approach too. – user113716 Aug 30 '11 at 20:08
4

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

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/

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
1

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"/>');
}
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
1

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);
    });
});
Chandu
  • 81,493
  • 19
  • 133
  • 134
0

You need to use jQuery slice with wrap

Check this question

Community
  • 1
  • 1
Ahmad Alfy
  • 13,107
  • 6
  • 65
  • 99
0

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

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/

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

bcoughlan
  • 25,987
  • 18
  • 90
  • 141