编写一个函数来获取具有数据属性的所有元素

Question

我试图建立我自己的jQuery函数以供以后个人使用，但我在构建这些插件时是新的，所以我开始学习然后应用我想做的事情，但我遇到了问题。 。 我想要构建的是jQuery函数获取属性inputs的所有元素（现在data-x），然后在其上应用另一个jQuery方法，例如addClass('class') 所以我想使用我的函数$('input[data-x="test"]').addClass('class');

而不是这个complix代码行getElems('x','test').addClass('class');。

这是我写的（fiddle）

(function ($){
$.fn.getElems = function( key, value ) {
        var elems = [];
        for (var x = 0; x < this.length; x++) {
            if($(this[x]).data(key) === value) {
                elems.push(this[x]);
            }
        }
        return elems;
    };
}(jQuery));

当我尝试添加类时，我收到错误.. undefined is not a function。

Answer 1

这可能是因为你在数组上调用jQuery方法。您可以使用filter方法，并返回已过滤的集合：

$.fn.getElems = function (key, value) {
    return this.filter(function () {
        return $(this).data(key) === value;
    });
}

Answer 2

如果您希望能够链接jQuery方法，那么您的插件应返回this引用：

(function ($) {
    $.fn.getElems = function (key, value) {
        return this.filter(function() {
            return $(this).data(key) === value;
        });
    };
}(jQuery));

通常，您应该为此目的使用jQuery过滤器方法。这样你的代码就会更像jQuery。

演示：http://jsfiddle.net/pg87ns53/3/

或者，如果您仍想坚持使用for循环的版本，则必须返回return $(elems);之类的内容，而不只是elems：

$.fn.getElems = function (key, value) {
    var elems = [];
    for (var x = 0; x < this.length; x++) {
        if ($(this[x]).data(key) === value) {
            elems.push(this[x]);
        }
    }
    return $(elems);
};

然而，这看起来有点笨拙。

演示：http://jsfiddle.net/pg87ns53/4/