理解jQuery的each循环

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();

我想要做的是遍历四个div.sectionInner，如果找到一个带有类名为carousel的子元素，则要添加一些按钮。我知道可以直接定位到carousel，但这是一个更大的问题的一部分，我有理由想要使用循环。

无论如何，在循环开始时，它会像预期的那样弹出“我们有一个Carousel”。然后，当明显地其他三个div没有Carousels时，它继续弹出“We got a Carousel”。我在这里做错了什么？

- mtwallet

Answer 1

这是因为你正在测试一个jQuery对象是否存在，它总是true。你需要测试length > 0:

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

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

- Blazemonger

Answer 2

这是关于javascript中“truthy”和“falsey”值的经典案例。你会注意到$(this).has('.carousel')会返回一个对象。在javascript中，对象始终为“truthy”。请参考以下链接：http://james.padolsey.com/javascript/truthy-falsey/?utm_source=javascriptweekly&utm_medium=email。

- Vaibhav

Answer 3

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

- PeeHaa