我如何检测如果选择器返回空?

检测jquery选择器是否返回空对象的最佳方法是什么? 如果是:

alert($('#notAnElement'));

你得到[object object]，所以我现在做的方式是:

alert($('#notAnElement').get(0));

它会写"undefined"你可以检查一下。但这似乎很糟糕。还有别的办法吗?

218530 次浏览
小开 
if ( $("#anid").length ) {
alert("element(s) found")
}
else {
alert("nothing found")
}
小开

选择器返回一个jQuery对象数组。如果没有找到匹配的元素，则返回一个空数组。你可以检查选择器返回的集合的.length，或者检查第一个数组元素是否“未定义”。

你可以在IF语句中使用任何下面的例子，它们都产生相同的结果。如果选择器找到匹配的元素，则为True，否则为false。

$('#notAnElement').length > 0
$('#notAnElement').get(0) !== undefined
$('#notAnElement')[0] !== undefined
小开
最佳答案

我最喜欢的是用这个小小的便利来扩展jQuery:

$.fn.exists = function () {
return this.length !== 0;
}

使用:

$("#notAnElement").exists();

比使用长度更明确。

小开

我喜欢这样做:

$.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

http://jsfiddle.net/vhbSG/

小开

我的偏好，我不知道为什么这还没有在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"
小开

我喜欢使用presence，灵感来自Ruby on Rails:

$.fn.presence = function () {
return this.length !== 0 && this;
}

你的例子是:

alert($('#notAnElement').presence() || "No object found");

我发现它优于提议的$.fn.exists，因为你仍然可以使用布尔运算符或if，但真实的结果更有用。另一个例子:

$ul = $elem.find('ul').presence() || $('<ul class="foo">').appendTo($elem)
$ul.append('...')
小开

这是在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/


提交答案