Insert <div> for every 5 elements using Javascript

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?

Answers:

Answer

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

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/

Answer

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

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

You need to use jQuery slice with wrap

Check this question

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.