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

我试图遍历一个元素并获取该元素的所有属性来输出它们，例如，一个标记可能有3个或更多属性，我不知道，我需要获取这些属性的名称和值。我在想这样的事情:

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

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

217588 次浏览
小开
最佳答案

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" }
小开

使用 LoDash，你可以简单地这样做:

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

这里概述了许多可以实现的方法，供我和您参考:)函数返回属性名称及其值的散列表。

香草 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 的香草 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;
}

下划线

也适用于洛达什。

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

浪荡

甚至比下划线版本更简洁，但只适用于 loash，而不适用于下划线。需要 IE9 + ，在 IE8是错误的。向@AlJey 为了那个致敬。

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

测试页

在 JS Bin 中，有一个涵盖所有这些函数的 现场测试页。测试包括布尔属性(hidden)和枚举属性(contenteditable="")。

小开

使用 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>

小开

一个调试脚本(jquery 解决方案，基于上面通过散列修改得到的答案)

function getAttributes ( $node ) {
$.each( $node[0].attributes, function ( index, attribute ) {
console.log(attribute.name+':'+attribute.value);
} );
}


getAttributes($(this));  // find out what attributes are available
小开

Underscore.js 的简单解决方案

例如: 得到所有的链接文本谁的父母有类 someClass

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

工作小提琴

小开

我的建议是:

$.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 () ;

小开

这是给你的一句俏皮话。

JQuery 用户:

将 $jQueryObject替换为 jQuery 对象，即 $('div')。

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

Vanilla Javascript 用户:

将 $domElement替换为 HTML DOM 选择器，即 document.getElementById('demo')。

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

干杯！


提交答案