瞭解jQuery的每個循環

Question

我有以下代碼：

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如果我找到一個旋轉木馬班的孩子，然後我想追加一些按鈕。我知道我可以直接針對旋轉木馬，但是這是一個更大的畫面的一部分，我的確有想使用一個循環的一個原因。

反正作爲循環開始它會提醒「我們得到了一個旋轉木馬」如你所期望的第一個div。然後，進行提醒「我們得到了一個旋轉木馬」的時候很清楚，我們沒有其他三個div的轉盤。我在這裏做錯了什麼？

Answer 1

這是因爲你是一個jQuery對象，這始終是true的存在測試。你需要測試length > 0代替：

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

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

Answer 2

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

Answer 3

這是在JavaScript 「truthy」 和 「falsey」 值的經典案例。你會注意到$（this）.has（'。carousel'）會返回一個對象。對象總是在JavaScript中真實。請參考以下鏈接：

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