检测 jQuery 选择器是否返回空对象的最佳方法是什么。如果你这样做:
alert($('#notAnElement'));
你得到[object Object],所以我现在的做法是:
alert($('#notAnElement').get(0));
这将写“未定义”,因此您可以检查一下。但这似乎非常糟糕。还有什么其他方法?
检测 jQuery 选择器是否返回空对象的最佳方法是什么。如果你这样做:
alert($('#notAnElement'));
你得到[object Object],所以我现在的做法是:
alert($('#notAnElement').get(0));
这将写“未定义”,因此您可以检查一下。但这似乎非常糟糕。还有什么其他方法?
我最喜欢的是用这个小小的便利来扩展 jQuery:
$.fn.exists = function () {
return this.length !== 0;
}
像这样使用:
$("#notAnElement").exists();
比使用长度更明确。
if ( $("#anid").length ) {
alert("element(s) found")
}
else {
alert("nothing found")
}
选择器返回一个 jQuery 对象数组。如果没有找到匹配的元素,则返回一个空数组。您可以检查.length
选择器返回的集合或检查第一个数组元素是否为“未定义”。
您可以在 IF 语句中使用以下任何示例,它们都会产生相同的结果。如果选择器找到匹配的元素,则为真,否则为假。
$('#notAnElement').length > 0
$('#notAnElement').get(0) !== undefined
$('#notAnElement')[0] !== undefined
我喜欢做这样的事情:
$.fn.exists = function(){
return this.length > 0 ? this : false;
}
那么你可以做这样的事情:
var firstExistingElement =
$('#iDontExist').exists() || //<-returns false;
$('#iExist').exists() || //<-gets assigned to the variable
$('#iExistAsWell').exists(); //<-never runs
firstExistingElement.doSomething(); //<-executes on #iExist
我喜欢使用presence
,灵感来自Ruby on Rails:
$.fn.presence = function () {
return this.length !== 0 && this;
}
您的示例变为:
alert($('#notAnElement').presence() || "No object found");
我发现它优于建议的$.fn.exists
,因为您仍然可以使用布尔运算符 or if
,但真实的结果更有用。另一个例子:
$ul = $elem.find('ul').presence() || $('<ul class="foo">').appendTo($elem)
$ul.append('...')
我的偏好,我不知道为什么这在 jQuery 中还没有:
$.fn.orElse = function(elseFunction) {
if (!this.length) {
elseFunction();
}
};
像这样使用:
$('#notAnElement').each(function () {
alert("Wrong, it is an element")
}).orElse(function() {
alert("Yup, it's not an element")
});
或者,正如它在 CoffeeScript 中的样子:
$('#notAnElement').each ->
alert "Wrong, it is an element"; return
.orElse ->
alert "Yup, it's not an element"
这是在 JQuery 文档中:
http://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/
alert( $( "#notAnElement" ).length ? 'Not null' : 'Null' );
默认情况下,您可能希望一直这样做。我一直在努力包装 jquery 函数或 jquery.fn.init 方法来做到这一点而不会出错,但是您可以对 jquery 源进行简单的更改来做到这一点。包括一些您可以搜索的周边线路。我建议搜索 jquery 源The jQuery object is actually just the init constructor 'enhanced'
var
version = "3.3.1",
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
var result = new jQuery.fn.init( selector, context );
if ( result.length === 0 ) {
if (window.console && console.warn && context !== 'failsafe') {
if (selector != null) {
console.warn(
new Error('$(\''+selector+'\') selected nothing. Do $(sel, "failsafe") to silence warning. Context:'+context)
);
}
}
}
return result;
},
// Support: Android <=4.0 only
// Make sure we trim BOM and NBSP
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
jQuery.fn = jQuery.prototype = {
最后但同样重要的是,您可以在此处获取未压缩的 jquery 源代码:http: //code.jquery.com/