Understanding jQuery each loop

Question

I have the following code:

HTML:

<div class="sectionInner"><div class="carousel"></div></div>
<div class="sectionInner"></div>
<div class="sectionInner"></div>
<div class="sectionInner"></div>

JS:

function checkForCarousel() {
    $('.sectionInner').each(function(i) {
        if($(this).has('.carousel')) {
            alert('We got a Carousel!');
        }
        else {
            alert('No Carousels here')
        }
    });
}

checkForCarousel();

What I am trying to do is loop over the four div.sectionInner if I find a child with class of carousel then I want to append some buttons. I know I can just target the carousel directly but this is part of a bigger picture and I do have a reason for wanting to use a loop.

Anyway as the loop begins it alerts 'We got a Carousel' as you'd expect for the first div. It then carries on alerting 'We got a Carousel' when quite clearly we don't have Carousels for the other three divs. What am I doing wrong here?

Blazemonger · Accepted Answer · 2011-10-26 12:48:40Z

9

It's because you're testing for the existence of a jQuery object, which is always true. You need to test for length > 0 instead:

if($(this).has('.carousel').length) { // is false if length == 0

http://jsfiddle.net/mblase75/DzafK/

answered Oct 26, 2011 at 12:48

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vaibhav · Accepted Answer · 2011-10-26 13:07:08Z

3

This is the classic case of "truthy" and "falsey" values in javascript. You will notice that $(this).has('.carousel') will return an object. Objects are always truthy in javascript. Please refer the following link:

http://james.padolsey.com/javascript/truthy-falsey/?utm_source=javascriptweekly&utm_medium=email

answered Oct 26, 2011 at 13:07

Vaibhav

5697 silver badges31 bronze badges

Comments

Dennis · Accepted Answer · 2011-12-19 17:45:29Z

2

$('.sectionInner').each(function(i) {
    if ($('div', this).hasClass('carousel')) {
        alert('We got a Carousel!');
    }
    else {
        alert('No Carousels here')
    }
});

edited Dec 19, 2011 at 17:45

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

answered Oct 26, 2011 at 12:49

PeeHaa

73.1k60 gold badges195 silver badges264 bronze badges

Collectives™ on Stack Overflow

Understanding jQuery each loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related