如何将自定义的jQuery函数应用于匹配>1个元素的选择器

Question

我有几个文本框，我想应用自定义的 jQuery 函数：

```html

我有几个文本框，我想应用自定义的 jQuery 函数：

```

jQuery.fn.setReadOnly = function () {
    var o = $(this[0]);
    o.prop('readonly', true)
    .css('background-color', '#F0F0F0');
};

现在我需要做的是：

$('#txt1').setReadOnly();
$('#txt2').setReadOnly();
$('#txt3').setReadOnly();
$('#txt4').setReadOnly();
$('#txt5').setReadOnly();

我希望实现以下目标：

$('#txt1, #txt2, #txt3, #txt4, #txt5').setReadOnly();

谢谢。

- anmarti

---

你试过完全按照那个做吗？（最后一个）也许会有惊喜。 - jonvuri

是的，它没有起作用。 - anmarti

应该是这样的。请参考David的回答。 - jonvuri

几乎：只有this[0] :) 但你说得对，这几乎可以直接使用... - Samuel Caillerie

我也想知道答案，所以点赞支持。 - Derek

@Kiyura，OP的原始代码无法正常工作，因为它明确地分解了提供的jQuery对象并仅取第一个元素。如果他说var o = this（并且还返回结果以确保链接工作），它将起作用。 - Alnitak

Answer 1

在您的情况下，您可以直接使用this - 它已经是一个匹配每个提供的元素的jQuery对象：

jQuery.fn.setReadOnly = function() {
    return this.prop('readonly', true).css('background-color', '#f0f0f0');
}

在更一般的情况下，如果你想对每个DOM元素执行某个操作而不是在整个集合上调用jQuery函数，则可以这样做：

jQuery.fn.myFunc = function() {
     return this.each(function() {
         ...
     });
});

在您的情况下，这是不必要的，因为.prop和.css调用会隐式执行.each。

- Alnitak

Answer 2

通常，将其应用于所有匹配元素的语法类似于以下内容：

jQuery.fn.setReadOnly = function () {
    return this.each(function () {
        $(this).prop("readonly", true).css("background-color", "F0F0F0");
    });
};

虽然不必在this上使用.each方法来迭代每个匹配项，但如果您将来扩展此插件以执行更多操作并需要将其应用于jQuery方法之外的每个元素（prop和css部分），那么这将是正确的方法。

- Ian

---

这个插件中的.each是不必要的，因为.prop和.css调用会隐式地执行它。 - Alnitak

@Alnitak 是的，我理解。但是如果这个“插件”要扩展，这种格式可能会被使用。这只是一个例子，并且由于简单的each方法，它不会增加太多开销。无论如何，我想我应该在一开始就提到这一点。 - Ian

你还需要在 .each 循环内部调用 $(this)，这会增加额外的开销。 - Alnitak

@Alnitak 开销？哦，小心 jQuery 的开销。请编写一个插件，它可以在没有使用 $(this) 的情况下执行比此示例更多的操作。 - Ian

Answer 3

您目前正在明确设置$(this[0])，这只访问第一个元素。

您想使用o = $(this);

演示

编辑：正如Alnitak指出的那样，this将是一个jQuery集合，您可以直接进行this.prop(...)而不需要额外的$()包装。

- David Hedlund

Answer 4

看看我的点赞：使用this.each - 它更好并返回对象链接。

你正在获取第一个项目的'this'对象 - 只需使用a循环它：

for(var i = 0, len = this.length; i<len; i++){
    var o = $(this[i]);
    o.prop('readonly', true)
    .css('background-color', '#F0F0F0');
}

未经测试，但我非常确定它可以工作。

- Aaron Romine

---

只是一点小提示：“看我的赞”并没有太多意义。投票是匿名的。 - David Hedlund

Answer 5

这是你应该写的方式

别忘了链式调用。

jQuery.fn.setReadOnly = function () {
    // return 'this' for chaining purposes
    return this.prop("readonly", true)
               .css("background-color", "#f0f0f0");
    });
};

- Robert Koritnik

---

@AlnitakпјҡжҳҜзҡ„...дҪҶз”ұдәҺpropе’Ңcssе·Із»ҸеңЁйӣҶеҗҲдёӯзҡ„жүҖжңүе…ғзҙ дёҠиҝӣиЎҢж“ҚдҪңпјҢжүҖд»ҘжҲ‘们дёҚеҝ…и°ғз”ЁeachгҖӮдҪ е…ідәҺиҝҷдёҖзӮ№жҳҜжӯЈзЎ®зҡ„гҖӮи®©жҲ‘жӣҙжӯЈжҲ‘зҡ„зӯ”жЎҲгҖӮжҳҫ然жҲ‘еҶҷеҫ—еӨӘеҝ«дәҶпјҢеӣ дёәжҲ‘жңҹжңӣеҫҲеҝ«еҫ—еҲ°еҫҲеӨҡзӯ”жЎҲ... :) - Robert Koritnik