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

【问题标题】：Methods that work individually for multiple elements on page为页面上的多个元素单独工作的方法
【发布时间】：2016-10-03 10:31:02
【问题描述】：

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

假设我定义了一个新方法

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()，但我担心的是 - 是否可以重写上面的方法，使其适用于同班？

【问题讨论】：

等等，你是在写一个 jQuery 插件，还是在 vanilla Object 对象上的一个扩展？（如果它是一个 jquery 插件，则键是 returning .each）
在个人层面上这无关紧要，我想知道如何做到这两点（尤其是香草扩展，因为我不会总是有 jQuery）。对于这个特定的问题，我已经这样做了，并且我确实可以访问该页面的 jQuery 库。
@Snsa90：由于您似乎关心 DOM 元素，因此您会想要使用 jQuery 插件 ($.fn.myMethod)。通用 Object 方法中没有元素。关于您的问题，jQuery 不区分单个元素，它始终是一个集合。
但这与香草Object 的情况无关 - 只有一个对象。 jQuery 选择器返回“对象”这一事实是 javascript 的副作用。
@Bergi - 这种方法可能很有用 - 谢谢。

标签： javascript jquery oop object methods

【解决方案1】：

只需使用$('.elements').each() 函数并对每个元素重复它。

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

【讨论】：

我相信这行不通。我想知道“正确”的做法。
Stray 括号：')'，另外，这并不能解释任何东西，它也无助于问题，因为它不是关于“我如何在每个元素上执行函数”......

【解决方案2】：

我认为您混淆了两个非常不同但略有相关的概念

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

由于您似乎关心 DOM 操作，我将展示如何做到这两点。

jQuery

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

$.fn.myPlugin = function() {

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

};

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

香草

如果您使用原生 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();

【讨论】：

谢谢 - 正是我正在寻找的答案类型。非常感谢。