无法使用 jquery 的 attr() 获取 div 属性答案

【问题标题】：Can't get div attributes with jquery's attr()无法使用 jquery 的 attr() 获取 div 属性
【发布时间】：2014-10-21 10:40:53
【问题描述】：

以下代码：

<div id='idiv' name='ndiv'>
<script>
    var attrs = $('#idiv').attr({})
    var astr = JSON.stringify(attrs)
    console.log (astr)
</script>

在控制台中产生：

{"0":{},"length":1,"context":{"location":{}},"selector":"#idiv"}

为什么不是结果：

{"id":"idiv","name":"ndiv"}

如何获得后者？

【问题讨论】：

作为注释，尽量在每条语句的末尾使用分号
我一直在虔诚地使用分号，直到我发现它们在 javascript 中完全是可选的。现在我很高兴从不使用它们，因为我不必这样做。
它们并不总是可选的，在某些情况下它们不是可选的。因此，始终使用它们是一个好习惯。你应该检查这个答案：stackoverflow.com/a/1169596/3645944
感谢您指出这一点。这很微妙，但在这种情况下肯定会激发分号。如果我用这种方式编写任何带有函数的代码，我会记住它。

标签： javascript jquery json attr stringify

【解决方案1】：

试试这个：

<div id='idiv' name='ndiv'>
<script>
    var attrMap = $('#idiv')[0].attributes;
    var attrs = {};
    $.each(attrMap, function(i,e) { attrs[e.nodeName] = e.value; });
    console.log(attrs); // Object {id: "idiv", name: "ndiv"} 
    console.log(JSON.stringify(attrs)) //  {"id":"idiv","name":"ndiv"} 
</script>

小提琴：http://jsfiddle.net/xbuhbqux/

【讨论】：

那行得通，所以谢谢巴勃罗。我很惊讶它必须如此复杂。这是使用 jquery 提取 html 元素属性的典型方法吗？有没有更简单的方法？
@tgoneil 那是 3 行，我不认为它那么复杂。但我认为没有理由获取元素的所有属性，为什么要这样？
无意冒犯，但我们又来了，带着“我无法想象你为什么要这样做”这样的问题。我经常看到这个。它假定提出问题的人足够聪明，能够理解为什么需要特定编程技术的所有正当理由。为了回答您的问题，我充分利用了 jquery 操纵 DOM 的能力。我从零静态 html 开始，然后从那里开始。跟踪使用单独的数据结构添加的属性是可能的，但非常乏味。因此需要 jquery 来报告。
如果您正在挠头想知道 jquery 的特定应用程序处理所有 DOM 操作而不是从静态 html 开始的优势，那么我们再来一次...... :- )
@tgoneil 我真的不明白你在做什么，但当然，我你真的需要这个，然后使用我发布的代码，我只是问，因为也许我可以帮助你想其他方式来接近你想要做的事情（是的，我知道，我写了一百遍what you are trying to do，对此感到抱歉）

【解决方案2】：

如果要创建一个元素所有属性的对象，请参考this SO answer

生成你展示的对象：

var idiv = $('#idiv');
var attrs = JSON.stringify({
    "id": idiv.attr("id"),
    "name": idiv.attr("name")
});
console.log(attrs);

【讨论】：

我意识到如果我用 attr('id') 等显式调用 attr()，我可以获得属性。这假设我提前知道属性名称，但我不知道。
或者至少可以方便地访问。更多细节在我对答案的回复之一。

【解决方案3】：

jQuery 运算符通常是可链接的，通常返回元素数组，而不是单个元素。

您所做的实际上是返回一个匹配元素的列表，并要求该列表中所有项目的属性，这也返回一个列表元素。 JSON.stringify 反映了这一点。

【讨论】：