循环元素's在DOM中的ID

Looping through element's ids in the DOM

本文关键字：DOM 中的 ID 元素 循环      更新时间：2023-09-26

我的html中有几个带有id的div元素。

这是我的js:

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

也就是说，我正在获取元素列表，然后在每个元素上循环并尝试获取其id。这不起作用，我理解原因。我该怎么做？

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

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

不过，以你的具体例子。。。

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

这些元素仅公开本机API。这里的一个选项是访问这些元素的本机id。

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

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

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

现在您正在使用jQuery，您应该使用jQuery.each：

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

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>

相关文章：