4

我想通过 jQuery 获取 HTML-5 数据属性。

所以，我正在使用.data().

我需要获取超过 1 个数据属性，因此我没有指定任何参数并缓存结果。

var data = $('myselecttor').data()

但问题是，.data()不仅获取 HTML-5 属性，还获取由 jquery（供内部使用）或其他插件（在我的情况下为 jquery-ui）设置的数据存储值

Demo

我需要一次调用（不单独）获取所有 HTML-5 数据属性（不包括数据存储值）

ps 发送这个data()会$.ajax导致Uncaught TypeError: Illegal invocation错误。

我希望，它会帮助某人。

我的解决方案

最后，我将所有数据属性作为 json 保存在一个数据属性中。jQuery 通过自动解析数据属性中的任何 json 来帮助它。

<div data-person='{"name": "jashwant","sex": "male"}'></div>

并且可以在javascript中访问它

 var person =  $('div').data('person');
 console.log(person.name);  // jashwant
 console.log(person.sex);   // male

唯一的问题是现在我不能使用像[data-name="jashwant"]

4

3 回答 3

2

您可能可以查看属性本身，但您也可以使用元素的dataset.

var data = $('div').draggable().get(0).dataset;

http://jsfiddle.net/DprgS/1/

于 2013-03-11T18:40:32.127 回答
2

你可以试试这个

(function($) {
    $.fn.getDataAttr = function() {
        var attributes = {}; 
        if( this.length ) {
            $.each( this[0].attributes, function( i, attr ) {
                if( attr.name.substr(0,5) =='data-' )
                    attributes[ attr.name ] = attr.value;
            } ); 
        }
        return attributes;
    };
})(jQuery);

采用

var data = $('div').draggable().getDataAttr();
console.log(data); // {data-name: "jashwant", data-sex: "male"}

演示。

于 2013-03-11T19:23:05.617 回答
0

更多选择：

命名空间您的数据属性

<div id="mydiv" data-jashwant-name="jashwant" data-jashwant-sex="male">Drag me</div>

然后循环并只选择你的

for (var i in data) {
  if (i.indexOf('jashwant') > -1 ) { 
    console.log(i + " : " + data[i]);
  }
}

或者...不太可靠，但可能适用于这种情况。仅选择值为字符串的数据属性（忽略 jquery UI 对象）

for (var i in data) {
  if (typeof data[i] === "string" ) { 
    console.log(i + " : " + data[i]);
  }
}
于 2013-03-11T19:07:14.967 回答