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

我有几个文本框，我想应用自定义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(); 

谢谢。

Answer 1

在你的情况下你可以使用this – 它已经是一个匹配每个提供的元素的jQuery对象：

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

在更一般的情况下，除了在整个集合上调用jQuery函数之外，您希望在每个DOM元素上显式执行某些操作，您将执行以下操作：

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

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

Answer 2

您当前正在设置显式$(this[0]) ，它只访问第一个元素。

你想使用o = $(this);

演示

编辑：正如Alnitak所指出的， this将是一个jQuery集合，你可以直接做this.prop(...)没有额外的$()包装。

Answer 3

通常，将其应用于所有匹配元素的语法如下：

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

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

Answer 4

看看我的upvote：使用this.each – 它更好，并返回对象链接。

你抓住第一个项目的’this’对象 – 简单地循环使用：

 for(var i = 0, len = this.length; i 

未经测试，但我确信这有效。

Answer 5

这就是你写它的方式

别忘了连锁。

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