2012-04-15 59 views
15

我正在創建一個用jQuery檢查元素的更多語義方法。使用$("#element").length > 0只是不真的感覺非常好措辭給我,讓我做我自己的選擇除了用於.is在空的jQuery選擇器數組上返回「True」?

if($("#element").is(":present")) { 
    console.log("It's aliiiveeee!!"); 
} 

這部分是容易的,就像這樣:

$.extend($.expr[':'],{ 
    present: function(a) { 
     return $(a).length > 0; 
    } 
}); 

我想更進一步,並可以很容易地看到,如果一個元素不存在,使用類似的語法:

$.extend($.expr[':'],{ 
    present: function(a) { 
     return $(a).length > 0; 
    }, 
    absent: function(a) { 
     return $(a).length === 0; 
    } 
}); 

$(function() { 
    if($("#element").is(":absent")) { 
    console.log("He's dead, Jim."); 
    } 
}); 

但是,這部分是出奇的難做到。我認爲這是因爲我正在削減返回的元素以獲得結果,並將選擇器分配給.length === 0與請求不使用元素相同:無論如何返回false。

我已經嘗試了很多不同的方式來扭轉的東西,得到這個當元素不存在返回true,false,如果它:

return $(a).length === 0; 

return !($(a).length > 0); 

if(!($(a).length > 0)) { 
    return true; 
} 

if($(a).length > 0) { 
    return false; 
} else { 
    return true; 
} 

return !!($(a).length === 0); 

// etc... 

有沒有一種簡單的方法如果元素不存在,只需返回true,如果返回false,則返回false?

回答

14

is的定義:

檢查當前匹配組針對一個選擇器,元件,或jQuery對象元素,並且如果這些元素中的至少一個給定的參數相匹配返回true。

問題是,既然你沒有元素,它是不可能的,你的元素之一匹配一些條件。 jQuery甚至沒有調用你的代碼,因爲沒有元素。

編輯:稍微澄清,您的代碼被調用一次爲您的對象中的每個元素(至少直到一個返回true)。沒有元素意味着代碼永遠不會被調用。代碼中的a始終是單個元素。

EDIT2:考慮到這一點,這將是一個更有效的實現的present

$.extend($.expr[':'],{ 
    present: function(a) { 
     return true; 
    } 
}); 
+0

因此,'.is'並不是真正爲匹配的選擇器組中沒有元素存在時返回true而設計的。 我考慮過的另一個選擇就是使用: 'if($(「#element」)。is(「:not(:present)」)){console.log(「他已經死了,Jim。」 ); }' 但奇怪的是,這也不起作用。 – 2012-04-15 21:23:53

+1

@Code Junkie:同樣,你沒有任何使用'.is()'的元素,所以這個函數根本不會被調用。無論你選擇什麼樣的選擇器,什麼都不會發生! – BoltClock 2012-04-15 21:25:58

+0

那麼可能無法在空的選擇器結果上返回true? – 2012-04-15 21:36:14

1

0在JavaScript中是「falsy」。您可以返回!$(a).length

+4

雖然這是真的,你可以把你想要有什麼,如果沒有元素的代碼永遠不會執行。 – 2012-04-15 21:11:23

0

如何:

if (!$(a)[0]) { 
    // $(a) is empty 
} 

所以,$(a)[0]檢索jQuery對象的第一個元素。如果該元素爲null/undefined,則表示jQuery對象爲空。

5

您可以簡單地使用

if(​$('element').length) // 1 or 0 will be returned 

$.extend($.expr[':'],{ 
    present: function(a) { 
     return $(a).length; 
    } 
}); 

if($('#element').is(':present')) 
{ 
    // code for existence 
} 
else 
{ 
    // code for non-existence 
} 

Example

2

由於$().is()在集合爲空時不會運行,所以:present選擇器是相當多餘的。因此,而不是與$.expr[':']打,我會延伸$.fn去包含相應的功能,如:

$.fn.extend({ 
    hasAny: function() { 
     return this.length > 0; 
    }, 
}); 

$.fn.extend({ 
    isEmpty: function() { 
     return this.length == 0; 
    }, 
}); 

的原因我會親自去使用這種方法是選擇通常用於檢查元素的特定屬性(比較:checked,:enabled,:selected,:hover等),而不是 jQuery元素集的屬性作爲一個整體(例如.size(),.index())。當然

用法將類似於以下內容:

if ($('#element').isEmpty()) 
    console.log("He's dead, Jim."); 
+0

是的,這可能是最好的方法。我主要是玩弄所有的選擇,看看最好的方法是什麼。接下來我會玩這個。 ^^ – 2012-04-16 18:02:01

相關問題