Reputation: 7818
I have a set of divs in the following structure:
<div id="team">
<div class="member">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="member">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="member">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="member">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
I want to use jQuery to loop over each div and add a class of floatLeft (if it is an even div) and floatRight (if it is odd). I tried to do it with the following code, but it added floatLeft and floatRight to all divs...
var $el,i,$selectedDivs,count;
$selectedDivs = $('#team > div');
count = $selectedDivs.length;
$selectedDivs.each(function() {
$el = $(this);
for (i=0; i<=count; i++) {
if (i % 2 == 0) {
$el.addClass('floatLeft');
}
else {
$el.addClass('floatRight');
}
}
});
I'm guessing it's because of the .each() function...My question is this. Since $selectedDivs is NOT an array, how can I loop over each of those divs using a for loop instead of the .each() function? I purposely want to use it this way rather than jQuery's .odd() and :odd capabilities...
Thanks! Amit
Upvotes: 1
Views: 954
Reputation: 28090
There's a word I'm looking for, in the Python world it's "Pythonic." A word that means "in line with the common idioms" but for jQuery. "jQueryish?"
jQuery("#team > div:even").addClass("floatLeft");
jQuery("#team > div:odd").addClass("floatRight");
Upvotes: 1
Reputation: 78850
Your function should be written as follows, instead:
var i = 0;
$selectedDivs.each(function() {
$el = $(this);
if (i % 2 == 0) {
$el.addClass('floatLeft');
}
else {
$el.addClass('floatRight');
}
i++;
});
Upvotes: 2
Reputation: 16025
My question is this. Since $selectedDivs is NOT an array, how can I loop over each of those divs using a for loop instead of the .each() function?
Ah but it is. Try this code:
int counter = $selectedDivs.length - 1; //zero based so sub one
for (; counter > 0; counter--){ //note I went for the backwards loop here, your preference
var javascriptElement = $selectedDivs[counter];
// I like to play with my javascriptElement in the morning
// I like to play with my javascriptElement in the afternoon
// I like to play with my javascriptElement in the evening
}
And that does exactly what you asked.
Upvotes: 0
Reputation: 887225
You should use either a for
loop or each
, but not both.
In a for
loop, you can write $selectedDivs.eq(i).addClass
.
Upvotes: 2