Question

我正在尝试浏览一个元素并获取该元素的所有属性来输出它们，例如标记可能有3个或更多属性，我不知道，我需要获取这些属性的名称和值。我正在思考以下几点：

$(this).attr().each(function(index, element) {
    var name = $(this).name;
    var value = $(this).value;
    //Do something with name and value...
});

有人能告诉我这是否可能，如果是这样，那么正确的语法是什么？

Answer 1

attributes属性包含所有内容：

$(this).each(function() {
  $.each(this.attributes, function() {
    // this.attributes is not a plain object, but an array
    // of attribute nodes, which contain both the name and value
    if(this.specified) {
      console.log(this.name, this.value);
    }
  });
});

您还可以做的是扩展.attr，以便您可以像.attr()一样调用它来获取所有属性的普通对象：

(function(old) {
  $.fn.attr = function() {
    if(arguments.length === 0) {
      if(this.length === 0) {
        return null;
      }

      var obj = {};
      $.each(this[0].attributes, function() {
        if(this.specified) {
          obj[this.name] = this.value;
        }
      });
      return obj;
    }

    return old.apply(this, arguments);
  };
})($.fn.attr);

用法：

var $div = $("<div data-a='1' id='b'>");
$div.attr();  // { "data-a": "1", "id": "b" }

Answer 2

以下是我可以做的许多方法的概述，供我自己参考以及你的:)函数返回属性名称及其值的哈希值。

Vanilla JS ：

function getAttributes ( node ) {
    var i,
        attributeNodes = node.attributes,
        length = attributeNodes.length,
        attrs = {};

    for ( i = 0; i < length; i++ ) attrs[attributeNodes[i].name] = attributeNodes[i].value;
    return attrs;
}

使用Array.reduce的Vanilla JS

适用于支持ES 5.1（2011）的浏览器。需要IE9 +，在IE8中不起作用。

function getAttributes ( node ) {
    var attributeNodeArray = Array.prototype.slice.call( node.attributes );

    return attributeNodeArray.reduce( function ( attrs, attribute ) {
        attrs[attribute.name] = attribute.value;
        return attrs;
    }, {} );
}

<强>的jQuery

此函数需要一个jQuery对象，而不是DOM元素。

function getAttributes ( $node ) {
    var attrs = {};
    $.each( $node[0].attributes, function ( index, attribute ) {
        attrs[attribute.name] = attribute.value;
    } );

    return attrs;
}

<强>下划线

也适用于lodash。

function getAttributes ( node ) {
    return _.reduce( node.attributes, function ( attrs, attribute ) {
        attrs[attribute.name] = attribute.value;
        return attrs;
    }, {} );
}

<强> lodash

比Underscore版更简洁，但仅适用于lodash，不适用于Underscore。需要IE9 +，IE8中有错误。感谢@AlJey for that one。

function getAttributes ( node ) {
    return _.transform( node.attributes, function ( attrs, attribute ) {
        attrs[attribute.name] = attribute.value;
    }, {} );
}

测试页

在JS Bin，有live test page涵盖所有这些功能。测试包括布尔属性（hidden）和枚举属性（contenteditable=""）。

Answer 3

使用LoDash你可以这样做：

_.transform(this.attributes, function (result, item) {
  item.specified && (result[item.name] = item.value);
}, {});

Answer 4

调试脚本（基于hashchange的上述答案的jquery解决方案）

<profile>
    <id>dev</id>
    <activation>
       <file>
           <exists>pom.xml</exists>
       </file>
    </activation>
</profile>

Answer 5

使用javascript函数可以更容易地获取NamedArrayFormat中元素的所有属性。

$("#myTestDiv").click(function(){
  var attrs = document.getElementById("myTestDiv").attributes;
  $.each(attrs,function(i,elem){
    $("#attrs").html(    $("#attrs").html()+"<br><b>"+elem.name+"</b>:<i>"+elem.value+"</i>");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="myTestDiv" ekind="div" etype="text" name="stack">
click This
</div>
<div id="attrs">Attributes are <div>

Answer 6

Underscore.js的简单解决方案

例如：获取所有链接的父母类别为someClass的文本

_.pluck($('.someClass').find('a'), 'text');

Working fiddle

Answer 7

我的建议：

$.fn.attrs = function (fnc) {
    var obj = {};
    $.each(this[0].attributes, function() {
        if(this.name == 'value') return; // Avoid someone (optional)
        if(this.specified) obj[this.name] = this.value;
    });
    return obj;
}

var a = $（el）.attrs（）;

Answer 8

这里是您的一线客。

JQuery用户：

用您的jQuery对象替换$jQueryObject。即$('div')。

Object.values($jQueryObject.get(0).attributes).map(attr => console.log(`${attr.name + ' : ' + attr.value}`));

Vanilla Javascript用户：

用您的HTML DOM选择器替换$domElement。即document.getElementById('demo')。

Object.values($domElement.attributes).map(attr => console.log(`${attr.name + ' : ' + attr.value}`));

干杯！

使用jQuery获取元素的所有属性

8 个答案:

JQuery用户：

Vanilla Javascript用户：