How to select each pair of two consecutive elements in jquery?

Question

Can someone help me figure out how to achieve the following? I have a set of divs of unknown size. Each div has a .feature class. I need to run a jQuery script to find all divs with .feature and then find all children as a pair of pairs. Then each pair will be passed to another jQuery function.

For example:

1. <div.feature/> 2. <div.feature/> 3. <div.feature/> 4. <div.feature/> 5. <div.feature/> 

The result should be that 1 + 2 and 3 + 4 connect together, so that I can then call another jQuery function for each of these separate sets.

I know that I can simply wrap each pair in an external div, and then find each child divb, but I would like to avoid changing the markup if possible.

Thanks in advance.

Answer 1

 var pairs = []; $('div.feature').each(function(i, div) { var i_over_2 = Math.floor(i / 2); if (!pairs[i_over_2]) pairs[i_over_2] = $(); pairs[i_over_2] = pairs[i_over_2].add(div); }); $.each(pairs, function(i, p) { p.doSomethingToAPair(); }); 

The idea is to create an array of jQuery objects.

edit looks like 1.4 added "$ ()" to get an empty jQuery object.

change again durr Javascript has a float :-)

Hey @ Adam: if we had this jQuery extension (this is of course the toy version):

 jQuery.fn.zip = function(s) { var o = $(s); return this.map(function(i, e) { return $(e).add($(o[i])); }); }; 

then we could build an array of "pairs" as follows:

 var pairs = $('div.feature:even').zip('div.feature:odd'); 

Answer 2

Idea

 $('div.feature:even').each(function(){ var t = $(this); var paired = t.add( $('div.feature:eq('+(t.index()+1)+')', t.parent()) ); //add to array, call function... } 

It may take a little tweaking to work for you - it has not been tested.

Preview

http://jsbin.com/okize/7

Answer 3

Let's move on to the assumption that you can fix HTML to make it valid, and it looks like this:

 <div class='feature'></div> <div class='feature'></div> <div class='feature'></div> <div class='feature'></div> <div class='feature'></div> <div class='feature'></div> 

Then you can use a selector, for example:

 $("div:odd") 

or

 $("div:even") 

more likely:

 $("div:even").children(':even'); 

NOTE: the index is based on 0, so 2.4, etc. (normal score) are ODD ...

Answer 4

I used this code to format a set of divs into a two-column table:

 $('.feature:even').each(function () { $(this).add($(this).next()).wrapAll("<tr>"); }); $('.feature').wrap('<td>'); $('tr').wrapAll('<table>'); 

Answer 5

This is my solution that I used for blog elements, but I think it can be applied to this problem, I hope it helps you, it is the same, I have a list of elements, and each li element has two divs inside and I I want to use the same style on each of the two elements, I mean 1 + 2 Same Style and 3 + 4 Other Style, etc., 5 + 6 - the same style 1 + 2. So, here's what I done.

HTML

 <ul> <li> <div class="photo">PHOTO</div> <div class="text">TEXT</div> </li> <li> <div class="photo">PHOTO</div> <div class="text">TEXT</div> </li> <li> <div class="photo">PHOTO</div> <div class="text">TEXT</div> </li> <li> <div class="photo">PHOTO</div> <div class="text">TEXT</div> </li> <li> <div class="photo">PHOTO</div> <div class="text">TEXT</div> </li> <li> <div class="photo">PHOTO</div> <div class="text">TEXT</div> </li> <li> <div class="photo">PHOTO</div> <div class="text">TEXT</div> </li> <li> <div class="photo">PHOTO</div> <div class="text">TEXT</div> </li> </ul> 

Javascript

 var row = 0; $( "li" ).each(function( index ) { // Here is when you loop every two elements if ( index % 2 == 0) { if (row % 2 == 0 ) { //console.log("index "+index + " row" + row); first_element = $( "ul li:eq("+index+")" ).addClass( "blue-bg" ); second_element = $( "ul li:eq("+(index+1)+")" ).addClass( "blue-bg" ); $(first_element).find('.photo').addClass( "pull-left" ); $(first_element).find('.text').addClass( "pull-right" ); $(second_element).find('.photo').addClass( "pull-left" ); $(second_element).find('.text').addClass( "pull-right" ); row = 1; // make row value odd } else { //console.log("index "+index + " row" + row); third_element = $( "ul li:eq("+index+")" ).addClass( "red-bg" ); four_element = $( "ul li:eq("+(index+1)+")" ).addClass( "red-bg" ); $(third_element).find('.photo').addClass( "pull-right" ); $(third_element).find('.text').addClass( "pull-left" ); $(four_element).find('.photo').addClass( "pull-right" ); $(four_element).find('.text').addClass( "pull-left" ); row = 0; // make row vale even } } }); 

This is jsfiddle