2013-04-12 43 views
2

相同的值考慮以下代碼:檢查是否存在兩個選擇的元素,並有jQuery中

if ($('.sidebar-primary, .sidebar-secondary').css('float') === 'left') { 

它給了我一個真實的,即使.sidebar-secondary甚至沒有在HTML存在。爲什麼是這樣,即使.sidebar-secondary有時不存在,我該如何做到這一點?

+0

你應該逐一檢查。 –

回答

1

正如jQuery documentation說:

[的.css()獲取樣式屬性的值在匹配的元素集合的第一個元素或設置一個或每個匹配元素的更多CSS屬性。

所以只考慮數組的第一個元素。你需要的東西,如:

var every = Function.call.bind(Array.prototype.every); 

var isFloatLeft = every($('.sidebar-primary, .sidebar-secondary'), function(node) { 
    return $(node).css('float') === 'left' 
}); 

console(isFloatLeft); 

不幸的是jQuery的沒有任何every方法,幸運的是,JavaScript的(ES5規格)的作用:https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/every

會注意到的情況下,是一種通用的方法,你需要檢查多元素。只有兩個,你可以直接比較它們:

isFloatLeft = $('.sidebar-primary').css('float') === 'float' && 
       $('.sidebar-secondary').css('float') === 'float; 
+0

這是關於CSS()而不是有逗號分隔選擇器?這意味着這將與其他事情一起工作? –

+0

不確定你的意思,但是這也適用於其他事情,而不是'css'方法。假設您想檢查所有元素是否具有相同的內容,您可以使用相同的方法,用'return node.textContent ='替換'return $(node).css('float')==='left''。例如,==「foo」。如果某個元素不存在,它將不會成爲集合的一部分,因此將被忽略,並且代碼將起作用 - 我的意思是「每個」。 – ZER0

+0

你說jQuery沒有'every'方法,每個'怎麼樣? –

0

它會匹配第一個選擇器,所以如果你有.sidebar-primary只有這個將被評估。
要解決這個問題,你必須一一比較。

看看下面的demo看看會發生什麼。

0

打破你的條件語句插入部分:

if ($('.sidebar-primary').css('float') === 'left' && $('.sidebar-secondary').css('float') === 'left')) { 
    //Do your stuff! 
} 

或者,如果你有元素的大名單要覈對:

function CheckFloat() { 
    $('.sidebar-primary, .sidebar-secondary').each(function(i, e) { 
     if (e.css('float') != 'left') { 
      return false; 
     } 
    }); 

    return true; 
} 
1

「獲取樣式屬性的值所述第一元件集合中匹配的元素或設置每個匹配的元素的一個或多個CSS屬性。「(http://api.jquery.com/css/)..

你應該嘗試:

if (
    $('.sidebar-primary').css('float') === 'left' && 
    $('.sidebar-secondary').css('float') === 'left'){ 
    // Your code here... 
} 
+0

記住,代碼測試,如果他們都'浮動'設置爲'左' – fernandosavio