Question

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

这是我的js：

var frameList =  $('div');

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

也就是说，我得到了元素列表，然后循环遍历每个元素并尝试获取其id。这不起作用，我理解为什么。我怎么能让它发挥作用？

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

通常使用每个元素迭代与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'));

Answer 3

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

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

循环遍历DOM中的元素ID

3 个答案: