以一种优雅的方式停止jQuery链接

Stop jQuery chaining in an elegant way

本文关键字:方式停 jQuery 链接 一种      更新时间:2023-09-26

首先,我有点困惑,我不能在SO上立即找到答案。这个问题是关于代码风格的。

考虑一个例子:

$('input[type=text]').on('click', doSomething);

如果页面上没有输入会发生什么?这个选择器的结果似乎是null,我们得到一个错误。

因此,我们必须使代码更大更难看:
var inputs = $('input[type=text]');
if (inputs) {
    inputs.on('click', doSomething);
}

我喜欢jQuery,我希望这个解决方案能有一个更优雅、更简短的形式。


这个问题的原因是prototype.js包含在一个页面上的三方脚本。抱歉,我应该在发布SO

之前在沙箱中测试这个问题

jQuery选择器总是返回一个jQuery对象,你永远不会得到null。

$('#Not exist!').attr('foo', 'foo'); //no error, returns jQuery

不像document.getElementById:

document.getElementById('Not exist!') == null

选择器实际上不返回null,如果它没有找到匹配,这是故意的,所以链接不会中断。这符合jQuery的"写得少,做得多"的座右铭。

我做了一个jsFiddle来说明这一点。打开浏览器上的开发人员工具并查看控制台。
var doSomething = function(){};
$('input[type=text]').on('click', doSomething); //No error
//...because this:
var obj = $('input[type=text]'); //is a jQuery object, even 
                                 //though there are no <input> elements
console.dir(obj); //Inspect the console. you get: jQuery.fn.jQuery.init[0]

我希望这有意义。您可以在示例中简单地执行前者:

$('input[type=text]').on('click', doSomething);

没有错误,只是一个空对象。你可以用

$('input[type=text]').on('click', doSomething);

我希望这行得通…

$('input[type="text"]').on('click', doSomething);