Question

我知道我可以使用$ .data但是如何迭代所有data-属性并将值与默认插件配置合并？

(function($){

  $.fn.plugin = function(opts){  

    opts = $.extend({
      foo: 'abc',
      boo: 45
    }, opts);

    return this.each(function(){        
          ...
    });

  };
})(jQuery);

所以，如果我使用

$('.el').plugin();

它应该在.el上查找数据属性，例如data-foo等......

Answer 1

在each()循环中，您可以将data()返回的对象与默认值合并，然后在$.extend()的单个调用中将opts参数与结果合并：

$.fn.plugin = function(opts) {
    return this.each(function() {        
        var thisOpts = $.extend({
            foo: "abc",
            boo: 45
        }, $(this).data(), opts);
        // Now use 'thisOpts' as operating parameters for this element...
    });
};

这应该达到你想要的效果：opts参数具有最高优先级，后跟当前元素的data-属性，后跟插件默认值。

Answer 2

.data()方法支持数据属性。

从jQuery 1.4.3开始，HTML 5数据属性将自动生成拉入jQuery的数据对象。用属性处理属性在jQuery 1.6中更改了嵌入式破折号以符合W3C HTML5 说明书

在不指定参数的情况下调用它将返回具有所有数据属性的键/值对的对象：

var mydata = $("#mydiv").data();

Answer 3

你可以获得这样一个元素的所有属性：

//get the element and setup an array for output
var el  = document.getElementById("o"),
    arr = [];

//loop through each attribute for the element
for (var i = 0, attrs = el.attributes, l=attrs.length; i < l; i++){

    //if the current attribute starts with `data-` then add it to the array
    if (attrs.item(i).nodeName.substr(0, 5) == 'data-') {
        arr.push(attrs.item(i).nodeName);
    }
}

以下是演示：http://jsfiddle.net/ksbD3/1/

此外，我从以下答案获得了上述大部分代码：Get all Attributes from a HTML element with Javascript/jQuery

Answer 4

您可以在jQuery对象上使用data()方法，该方法将所有数据属性作为键/值对。试试这个。

(function($){

  $.fn.plugin = function(opts){  

    //this.data() will give { foo: 'abc', boo: 45 ... }
    opts = $.extend(this.data(), opts);

    return this.each(function(){        
          ...
    });

  };
})(jQuery);

.data()参考：http://api.jquery.com/data/

Answer 5

感谢所有使用opts = $ .extend（this.data（），opts）指出的答案;

这里需要添加一个重要的事实：HTML数据属性的转换。

data-cool N ame可以像这样访问this.data（很酷 n ame）

data-another- c ool- n ame可以像这样访问this.data（另一个 C ool N < /强> AME）

详细信息：Does jQuery internally convert HTML5 data attribute keys to lowercase?

如果您不了解，则区分大小写并且属性名称的转换可能是一个陷阱。

从数据属性解析$ .extend配置

5 个答案: