Question

I have the following basic HTML:

<div class="row-wrapper">
  <div class="box">...</div>
  <div class="box">...</div>
</div>

…and I need to assign an additional class .foo to the inner DIVs that already have the .box class (keeping the .box class of course).

I need a way to detect when there are 2 DIVs inside .row-wrapper

Any idea how I can accomplish this?

I tried reading the jQuery API documentation for .length method but it’s bit too complex for my jQuery knowledge.

I also read a similar forum, but they don’t explain how to define the amount of items.

Any help is greatly appreciated.

Answer 1

// If there are 2 or more children 
if($('.row-wrapper').children('.box').length >= 2){
    // add a class
    $('.row-wrapper .box').addClass("foo");
}

Something like the above should work.

EDIT: Since wirey suggests there may be more than one .row-wrapper – which is a valid point, we can do something like this:

// Loop through each .row-wrapper
$(".row-wrapper").each(function(){
    // If there are 2 or more children
    if($(this).children('.box').length >= 2){
        // Find .box elements within $(this), and add a class.
        $(this).find('.box').addClass('foo');
    }
});

JSFiddle provided by Jared: http://jsfiddle.net/zqyKn/