jQuery: есть ли общий способ получить карту атрибутов элемента?

Question

Мне было интересно, есть ли способ получить хэш-карту атрибутов с помощью jQuery, например:

HTML:

<img id="site-logo" src="logo.jgp" alt="The Logo" class="ui-logo">

JAVASCRIPT:

// Something along these lines
$('#site-logo').getAttr();

РЕЗУЛЬТАТ:

{
   id: 'site-logo',
   src: 'logo.jpg',
   alt: 'The Logo',
   class: 'ui-logo'
}

Меня не интересуют какие-либо плагины, просто интересно, подумали ли парни из jQuery об этом, я искал в Google и попробовал .attr () метод без каких-либо параметров, но он выдает ошибку.

Answer 1

jQuery не имеет такового, но DOM фактически делает: attributes, что является NamedNodeMap Тривиально взять это и создать объект JS:

var attrs = {};
$.each($("selector")[0].attributes, function(index, node) {
    attrs[node.nodeName] = node.nodeValue;
});

Живой пример | Источник

Так что, если это то, что вы хотите регулярно, вы можете сделать плагин:

// Attributes map plugin
(function($) {
  /**
   * attrMap builds a map of the attributes of the first matched
   * element in the set.
   *
   * @returns the object, or undefined if there are no elements in
   *          the set
   */
  $.fn.attrMap = attrMap;
  function attrMap() {
    var attrs;
    if (this[0]) {
      attrs = {};
      $.each(this[0].attributes, function(index, node) {
          attrs[node.nodeName] = node.nodeValue;
      });
    }
    return attrs;
  }
})(jQuery);

Использование:

var attrs = $("selector").attrMap();

Живой пример | Источник

Answer 2

Нет, встроенного решения jQuery для создания хэш-карты из атрибутов узла не существует.

Вы можете легко создать небольшой метод, который будет выполнять эту работу, как, например, упомянутый @TJCrowder, использовать значение .attributes, например:

var hashMap = { };

Array.prototype.forEach.call( document.getElementById('site-logo').attributes, function( elem ) {
   hashMap[ elem.nodeName ] = elem.nodeValue;
});

console.dir( hashMap );

^{Для приведенного выше кода требуется браузер с поддержкой ES5 или Javascript ES5 shim}