Wrap every 3 divs in a div

Question

Is it possible to use the nth-child selector to wrap 3 sections with .wrapAll ? It seems I can’t work out the right equation.

So...

 <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> 

becomes ...

 <div> <div class="new"> <div></div> <div></div> <div></div> </div> <div class="new"> <div></div> <div></div> <div></div> </div> </div> 

Answer 1

You can do this with .slice() , for example:

 var divs = $("div > div"); for(var i = 0; i < divs.length; i+=3) { divs.slice(i, i+3).wrapAll("<div class='new'></div>"); } 

You can try the demo here , all we do here is get the elements you want to wrap and scroll through them by doing a .wrapAll() in batches of 3, then move on to the next 3, etc. It will wrap 3 at a time, and many of them remain at the end, for example 3, 3, 3, 2, if that is the case.

Answer 2

I wrote a generic chunk function that makes this pretty easy:

 $.fn.chunk = function(size) { var arr = []; for (var i = 0; i < this.length; i += size) { arr.push(this.slice(i, i + size)); } return this.pushStack(arr, "chunk", size); } $("div > div").chunk(3).wrap('<div class="new"></div>'); 

 $.fn.chunk = function(size) { var arr = []; for (var i = 0; i < this.length; i += size) { arr.push(this.slice(i, i + size)); } return this.pushStack(arr, "chunk", size); } $("div > div").chunk(3).wrap('<div class="new"></div>'); 

 div > div { width: 50px; height: 50px; background: blue; margin: 2px; float: left; } div.new { background: red; height: auto; width: auto; overflow: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> 

Answer 3

Plugin

 $(function() { $.fn.EveryWhat = function(arg1) { var arr = []; if($.isNumeric(arg1)) { $.each(this, function(idx, item) { var newNum = idx + 1; if(newNum%arg1 == 0) arr.push(item); }); } return this.pushStack(arr, "EveryWhat", ""); } }); 

How to use it.

Call EveryWhat() on the element and put a number for each element that you want to collect.

 $("div").EveryWhat(2).wrapInner('<div class="new" />'); 

Quotes

must have a properly formatted <div class="new" /> with class and closing tag. Stackoverflow prevents me from showing what it is, but here is the link of the closest div itself.

How it should look

This will wrap every other number you specify. I am using jquery 1.8.2. so remember how to use the EveryWhat(3) selector call and the number for each time. Of course, putting it at the bottom of the page or wrapping it in

 $(document).ready(function() { //place above code here }); 

You can use every nth and then .wrapInner('<div class="new" />') for the same results.

Answer 4

Here is a more useful version of Nick above:

 window.WrapMatch = function(sel, count, className){ for(var i = 0; i < sel.length; i+=count) { sel.slice(i, i+count).wrapAll('<div class="'+className+'" />'); } } 

You would use this as:

 var ele = $('#menu > ul > li'); window.WrapMatch(ele, 5, 'new-class-name'); 

Window

should be replaced with the namespace Handlers, of course.

Updated: slightly better version that uses jQuery

 (function($){ $.fn.wrapMatch = function(count, className) { var length = this.length; for(var i = 0; i < length ; i+=count) { this.slice(i, i+count).wrapAll('<div '+((typeof className == 'string')?'class="'+className+'"':'')+'/>'); } return this; }; })(jQuery); 

Use as:

 $('.list-parent li').wrapMatch(5,'newclass'); 

The second parameter for the shell name is optional.

Answer 5

 $(function() { $.fn.WrapThis = function(arg1, arg2) { /*=Takes 2 arguments, arg1 is how many elements to wrap together, arg2 is the element to wrap*/ var wrapClass = "column"; //=Set class name for wrapping element var itemLength = $(this).find(arg2).length; //=Get the total length of elements var remainder = itemLength%arg1; //=Calculate the remainder for the last array var lastArray = itemLength - remainder; //=Calculate where the last array should begin var arr = []; if($.isNumeric(arg1)) { $(this).find(arg2).each(function(idx, item) { var newNum = idx + 1; if(newNum%arg1 !== 0 && newNum <= lastArray){ arr.push(item); } else if(newNum%arg1 == 0 && newNum <= lastArray) { arr.push(item); var column = $(this).pushStack(arr); column.wrapAll('<div class="' + wrapClass + '"/>'); //=If the array reaches arg1 setting then wrap the array in a column arr = []; } else if(newNum > lastArray && newNum !== itemLength){ //=If newNum is greater than the lastArray setting then start new array of elements arr.push(item); } else { //=If newNum is greater than the length of all the elements then wrap the remainder of elements in a column arr.push(item); var column = $(this).pushStack(arr); column.wrapAll('<div class="' + wrapClass + '"/>'); arr = [] } }); } } }); 

I accepted the idea of ​​the Kyle plugin and expanded it to automatically wrap and accept two arguments. This did not work for me, but I received it with a few changes and additions to the code.

To call a function, simply use the parent of what you want to wrap, and then set your arguments as follows.

 $('#container').WrapThis(5, 'li'); 

The first argument is how many elements you want to combine together, and the second argument is the type of element you would like to wrap.

You can change the wrapper element class in the main function under the wrapClass variable.

Answer 6

I prepared this answer for another question, which was a duplicate of this. Therefore, perhaps my option will be useful for someone:

I think the solution is to wrap all three elements:

 var $lines = $('.w-col'), // All Dom elelements with class .w-col holder = []; //Collect DOM elelements $lines.each(function (i, item) { holder.push(item); if (holder.length === 3) { $(holder).wrapAll('<div class="w-row" />'); holder.length = 0; } }); $(holder).wrapAll('<div class="w-row" />'); //Wrap last elements with div(class=w-row) 

I wrote the same code in jsbin with some improvements http://jsbin.com/necozu/17/ or http://jsbin.com/necozu/16/