要素の属性を全部取得する

JavaScript

例えば

<div data-foo="a" data-bar="b" data-baz="c">...</div>

みたいに任意のカスタムデータ属性がついてて、こっから

{ foo: 'a', bar: 'b', baz: 'c' }

みたいなデータを作りたいので属性を全部取得したいんだけど、 jQuery ではできないっぽい。

DOMの element.attributes を使えばいける。

var div = document.querySelector('div');
var attrs = div.attributes;
for (var i = 0, len = attrs.length; i < len; i++) {
  console.log(attrs[i].name); //=> data-foo, data-bar, data-baz
  console.log(attrs[i].value); //=> a, b, c
}

ほぼ使いどころないけど jQuery プラグインで書くんだったらこんな感じだろうか

$.fn.attrAll = function() {
  var ret = {};
  var attrs = this.get(0).attributes;
  var attr;
  for (var i = 0, len = attrs.length; i < len; i++) {
    attr = attrs[i];
    ret[attr.name] = attr.value;
  }
  return ret;
};

console.log( $('div').attrAll() ); // { data-foo: 'a', data-bar: 'b', data-baz: 'c' }

追記: data() でできた