为什么`.attr(…)`只返回集合中第一个元素的值？

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

，它仅检索 first 元素的属性。 （此外，您真的不需要

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

属性。当我使用括号符号 (

this

) 索引

elm = this[index];

时，我正在索引 jQuery 实例的匹配元素集（类似于

get

方法，但更直接）。

Answer 2

这是由于

.attr()

:

获取匹配元素集中第一个元素的属性值。 （我的重点）

决议：

.attr()

方法仅获取匹配集中的first元素的属性值。要单独获取每个元素的值，请使用循环构造，例如 jQuery 的

.each()

或

.map()

方法。

例如，

jQuery.fn.mytest = function () {
    var ids = [];
    $(this).each(function() {
        ids.push($(this).attr('id'));
    });

    alert(ids);
}

（未经测试，另请参阅利用 jQuery 的强大功能来访问元素的属性。）

免责声明
这确实是

.map()

的用途。将以上内容视为想法的演示，而不是所述想法的实现:)

Answer 3

你需要使用

jQuery.fn.mytest = function () {
    return this.each(function(){
       alert(this.id);
    });
}

阅读 http://docs.jquery.com/Plugins/Authoring，其中描述了您尝试创建插件时需要了解的内容。

使用

return this.each(..)

可以链接您的插件，以便您可以执行以下操作

$('#something, #somethingelse').mytest().hide();

Answer 4

您正在选择多个元素，因此...您还需要循环遍历这些元素以提醒每个 id。现在你只能得到第一个id。所以应该是这样的：

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

未测试...