Amit
Amit

Reputation: 7818

Looping over DIVs using jQuery

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

Answers (4)

jpsimons
jpsimons

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

Jacob
Jacob

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

jcolebrand
jcolebrand

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

SLaks
SLaks

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

Related Questions