Question

我找不到一个好的指南，但我在这里寻找的只是推动正确的方向。

让我们说我已经定义了一种新方法

Object.defineProperty(Object.prototype, 'myMethod', {
    enumerable : false,
    configurable: true,
    value : function(args) {
        var _self = this;
        _self.doThis = function () {
            // some functionality
        }

        ....

        return this
});

里面的代码适用于让我们说$（'＃element'），但如果我将该方法应用于$（'。elements'），它只适用于数组的第一个元素。如何重写适用于单个元素和元素组的方法？

编辑 ******************************** ****

所以我得到了一个提示，当jQuery可用时我会使用jQuery.fn.extend（），但我关心的是 - 可以重写上面的方法，因此它可以用于多个元素同一个班级？

Answer 1

我认为你混淆了两个非常不同的，虽然有点相关的概念

编写jquery插件，可以作用于多个选定的元素
将属性/方法添加到现有对象原型的原型

当你似乎关注DOM操作时，我将展示如何做到这两点。

的jQuery

编写jQuery插件的范围是 vast 但是你应该从基本的guide to authoring plugins开始。实质上，您将方法添加到$.fn，然后它们按照所有其他jQuery方法工作。如您所知，jQuery选择器可以选择许多元素，并通过从插件返回this.each来处理这种情况

$.fn.myPlugin = function() {

    return this.each(function() {
        // Do something to each element here.
    });

};

用法：$(".myElements").myPlugin();

香草

如果您使用vanilla javascript选择多个元素，则可能使用getElementsByName或querySelector / querySelectorAll之一。您需要将新方法添加到这些方法的返回类型中 - 这将是NodeList - 您可以按照正常方式在value内枚举

Object.defineProperty(NodeList.prototype, 'myMethod', {
    enumerable : false,
    configurable: true,
    value : function(args) {
        var _self = this;
        console.log(_self.length); // should be the number of elements
        return this
    }
});

用法：document.getElementsByName("something").myMethod();或document.querySelectorAll("a").mymethod();

Answer 2

只需使用$('.elements').each()功能，并为每个元素重复一次。

$('.elements').each(function() {
    $(this).myMethod() );
});

在页面上单独为多个元素工作的方法

2 个答案:

的jQuery

香草