Question

Newb问题：

jQuery（'。foo'）[0]大部分时间完成工作。 jQuery（'。foo：first'）[0]稍微更明确，更高效。但是当数组为空时这并不好，所以检查是必要的。

但有没有比使用数组索引器更好的方法？即return是单个对象，如果没有找到则返回null。

我知道它的设计总是返回一个数组，因为jQuery的功能在于“set”操作。但有时更简洁的语法确实有助于提高可读性并避免错误。

Answer 1

我为你制作了这个插件，希望它有用：

//return single DOM element or null
jQuery.fn.getFirst = function() {
    var ele = jQuery(this).filter(':first')[0];
    if(ele !== undefined) {
        return ele;
    }
    return null;
};

简单的测试用例：

<input name="foo" value="hooohooo" class="test"/>
<input name="bar" value="heeeeheeee" class="test"/>

jQuery(document).ready(function() {    
    alert(jQuery('.test').getFirst()); //alerts [object HTMLInputElement]
    alert(jQuery('.nonExistent').getFirst()); //alerts 'null'
});

我不知道getFirst是否是最佳名称，有什么建议吗？我也想过single和first，但似乎无法下定决心。

Answer 2

如果我不保证选择器至少返回一个元素，我倾向于使用each()迭代该集合。

jQuery('.foo').each(function() {
    this;
});

如果我使用像:first这样的选择器来验证选择器，我甚至会这样做。

jQuery('.foo:first').each(function() {
    this;
});

编辑：我看到实现“getFirst”方法的其他答案。虽然我没有看到它的用处，但这是我的看法。它具有相同的功能，但我认为one是一个更合适的名称 - 避免与:first选择器混淆。我很想看到一个用例。

/**
 * Return the first item of the collection, or
 * null if the collection is empty.
 */
jQuery.fn.one = function() {
    return this[0] || null;
};

Answer 3

你肯定需要这样的扩展：

$(document).ready(function () {
    jQuery.fn.getFirst = function () {
        if( this.length == 0 )
            return null;
        else
            return this.get(0);
        }

    var ret = 0;
    ret = $(".foo").getFirst();

    if( ret )
        $(ret).text( "Tight!" );

你去了，没有更多的数组下载！

从jQuery选择返回单个对象而不是数组的最佳方法是什么？

3 个答案: