jquery - 这段 JQuery 代码中发生了什么？

Question

对于这个非常基本的 JQuery 问题，我们深表歉意。我创建了“mytest”jquery 函数，如下所示:

jQuery.fn.mytest = function () {
    alert($(this).attr('id'))
}

现在，如果我这样调用它，一切都是完美的:

$("#someid").mytest();

它提醒“someid”。但如果我做这样的事情:

$("#someid, #anotherid, #moreids").mytest();

此功能仅提醒“someid”。当然“anotherid”和“moreids”是存在的。

为什么 mytest() 不起作用？该函数的正确代码是什么？

Answer 1

您的代码正在向 jQuery 添加一个“插件”，使您的函数在 jQuery 实例上可用。您在函数中只看到一个 ID 的原因是您正在使用 attr ，它仅检索第一个元素的属性。 (此外，您确实不需要attr来获取id值。)

您的函数应如下所示 ( live copy ):

jQuery.fn.mytest = function () {
    var ids = jQuery.map(this, function(elm) {
        return elm.id;
    });
    alert(ids.join(","));
};

...显示当前匹配集合中每个元素的 id 值(如果有)。

或者您可以使用一个简单的循环来完成此操作，而不是使用 jQuery.map ( live copy ):

jQuery.fn.mytest = function () {
    var ids, index, elm;

    ids = [];
    for (index = 0; index < this.length; ++index) {
        elm = this[index];
        if (elm.id) {
            ids.push(elm.id);
        }
    }
    alert(ids.join(","));
};

另外，请注意，在 jQuery 插件函数中，this 是当前的 jQuery 实例，因此您不需要(或不希望)通过 $() 围绕元素创建一个 jQuery 包装器(您可以在事件处理程序中执行此操作，而不是在插件中执行此操作)。因此，当我在上面的第二个示例中执行 this.length 时，我使用的是我们当前正在操作的 jQuery 实例的 length 属性。当我使用括号符号 (elm = this[index];) 索引 this 时，我正在索引 jQuery 实例的匹配元素集(例如 get方法，但更直接)。