How do I select every pair of 2 sequential elements in jQuery?
Can anyone please help me to work out how to achieve the following? I have a set of divs of unknown size. Each div has a class of .feature. I need to run a jQuery script to find all divs with .feature and then find all children as a series of pairs. Each pair will then be submitted to a further jQuery function.
For example:
1. <div.feature/>
2. <div.feature/>
3. <div.feature/>
4. <div.feature/>
5. &l开发者_JAVA技巧t;div.feature/>
The result should be that 1+2 and 3+4 get paired together such that I can then call another jQuery function on each of these individual sets.
I know that I can simply wrap each pair in an outer div and then find each wrapper divs children but I'd like to avoid changing the markup if possible.
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 build up an array of jQuery objects.
edit looks like 1.4 added "$()" to get an empty jQuery object.
edit again durr Javascript has floats :-)
Hey @Adam: if we had this jQuery extension (this is a toy version of course):
jQuery.fn.zip = function(s) {
var o = $(s);
return this.map(function(i, e) {
return $(e).add($(o[i]));
});
};
then we could build the "pairs" array like this:
var pairs = $('div.feature:even').zip('div.feature:odd');
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...
}
May need little tweaking in order to work for you - it's untested.
preview
http://jsbin.com/okize/7
Let's jump to the assumption that you can fix the HTML to make it valid, and it looks like:
<div class='feature'></div>
<div class='feature'></div>
<div class='feature'></div>
<div class='feature'></div>
<div class='feature'></div>
<div class='feature'></div>
You can then use a selector like:
$("div:odd")
or
$("div:even")
more like:
$("div:even").children(':even');
NOTE: 0 based index, so 2,4,etc (normal count) are ODD...
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>');
This is my solution that I used for a elements of a blog but I think it could be applied to this problem, I hope help you, it is the same I have a list of element and every li element has inside two div element and what I want is to apply the same style in step of every 2 elements, I mean, 1+2 Same Style and 3+4 Other Style and so on, 5+6 the same style of the 1+2. So here is What I did.
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 the jsfiddle
精彩评论