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

Question

我有几个文本框,我想应用自定义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隐式.