How can I detect if a selector returns null?
检测jQuery-selector是否返回空对象的最佳方法是什么。
如果你这样做:
1 | alert($('#notAnElement')); |
你得到[object Object],所以我现在这样做的方式是:
1 | alert($('#notAnElement').get(0)); |
这将编写"未定义",因此您可以检查它。 但看起来非常糟糕。 还有什么其他方式?
我最喜欢的是使用这个极小的便利来扩展jQuery:
1 2 3 | $.fn.exists = function () { return this.length !== 0; } |
使用如下:
1 | $("#notAnElement").exists(); |
比使用长度更明确。
1 2 3 4 5 6 | if ( $("#anid").length ) { alert("element(s) found") } else { alert("nothing found") } |
选择器返回一个jQuery对象数组。如果未找到匹配的元素,则返回空数组。您可以检查选择器返回的集合的
您可以在IF语句中使用以下任何示例,它们都会产生相同的结果。如果选择器找到匹配元素,则为true,否则为false。
1 2 3 | $('#notAnElement').length > 0 $('#notAnElement').get(0) !== undefined $('#notAnElement')[0] !== undefined |
我喜欢做这样的事情:
1 2 3 | $.fn.exists = function(){ return this.length > 0 ? this : false; } |
那么你可以这样做:
1 2 3 4 5 6 | 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/
我喜欢使用
1 2 3 | $.fn.presence = function () { return this.length !== 0 && this; } |
你的例子变成:
1 | alert($('#notAnElement').presence() ||"No object found"); |
我发现它优于提议的
1 2 | $ul = $elem.find('ul').presence() || $('<ul class="foo">').appendTo($elem) $ul.append('...') |
我的偏好,我不知道为什么这还没有在jQuery中:
1 2 3 4 5 | $.fn.orElse = function(elseFunction) { if (!this.length) { elseFunction(); } }; |
像这样使用:
1 2 3 4 5 | $('#notAnElement').each(function () { alert("Wrong, it is an element") }).orElse(function() { alert("Yup, it's not an element") }); |
或者,在CoffeeScript中看起来:
1 2 3 4 | $('#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/
1 | alert( $("#notAnElement" ).length ? 'Not null' : 'Null' ); |
您可能希望默认情况下始终执行此操作。我一直在努力包装jquery函数或jquery.fn.init方法来做到这一点没有错误,但你可以对jquery源做一个简单的更改来做到这一点。包括您可以搜索的一些周边线路。我建议在
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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/