循环遍历DOM中元素的ID [重复]答案

【问题标题】：Looping through element's ids in the DOM [duplicate]循环遍历DOM中元素的ID [重复]
【发布时间】：2015-11-07 06:43:13
【问题描述】：

我的 html 中有一些带有 id 的 div 元素。

这是我的 js：

var frameList =  $('div');

for(i = 0; i < frameList.length; i++) {
    console.log(frameList[i].attr('id'));
};

也就是说，我正在获取元素列表，然后遍历每个元素并尝试获取其 ID。这不起作用，我明白为什么。我怎样才能让它工作？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

通常，匹配 jQuery 选择器的元素集合使用 each 进行迭代，其中 this 在迭代期间绑定到匹配集合的当前元素

$('div').each(function(){
    console.log(this.id);
});

虽然你的具体例子......

这里的问题是，当您使用数组索引访问 frameList 时，您访问的是 jQuery 创建的伪数组。这个底层数组仅保存与选择器匹配或包含在 jQuery 对象中的元素集。

这些元素只公开原生 API。这里的一种选择是访问这些元素的原生 id。

console.log(frameList[i].id);

另一种选择是使用 jQuery 函数 eq 来获取该元素的 jQuery 对象，然后使用 attr

console.log(frameList.eq(i).attr('id'));

【讨论】：

【解决方案2】：

既然你正在使用 jQuery，你应该使用 jQuery.each：

$('div').each(function() {
  console.log(this.id);
});

【讨论】：

谢谢，但是这个问题真的是另一个问题的重复吗？
@jgozal 您的问题与另一个问题中的 OP 完全相同。我提供的解决方案是您问题的另一种解决方案，如果有任何问题，您应该接受 TravisJ 的回答作为您问题的答案。他至少试图解释发生了什么:-)
感谢您的建议。我感谢所有其他答案，有时希望我能批准所有这些答案。但我确实在我的问题中说我理解为什么我的代码不起作用所以不需要解释，我认为你的解决方案是最简单和最优雅的，因为它避免了创建新变量。

【解决方案3】：

frameList[i] 不是 jQuery 对象，因此未定义 .attr()。

frameList[i].id 或 frameList.eq(i).attr("id") 应该可以工作：

var frameList = $('div');

for(i = 0; i < frameList.length; i++) {
  console.log(frameList[i].id);
  console.log(frameList.eq(i).attr("id"));
};

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>

【讨论】：

使用 .attr('id') 是 jQuery 代码气味