迭代 jQuery $(this).attr('class').split(" ") 给出奇怪的结果

Question

我有一个页面，我正在尝试为许多共享公共类的 div 获取类数组。例如：

<div class="common lorem ipsum"></div>
<div class="common dolor sit"></div>
<div class="common hello world"></div>

我想获取每个 common 类 div 并获取其类的数组。目前，我正在使用 jQuery 来完成此操作：

$('.common').each(function(index) {
  var classes = $(this).attr('class').split(" ");
  for(var i in classes) {
    alert(classes[i]);
  }
});

查看第一个生成的 classes 变量会得出以下结果：

classes: Array (3)
0: "common"
1: "lorem"
2: "ipsum"
length: 3
__proto__: Array

问题是 for(var i in classes) 似乎正在迭代 __proto__ 数组并深入研究它 - 有人以前遇到过这个吗？我使用的是最新版本的 Chrome (6.0.453.1)。

Answer 1

for ( var i = 0, l = classes.length; i<l; ++i ) {
 alert( classes[i] );
}

使用常规 for 循环（而不是 for...in）迭代数组，否则它会枚举数组的属性（因为它仍然是一个对象，并且除了内部元素之外还具有其他属性）。

Answer 2

要添加到其他有效答案，由于您已经在使用 jQuery，因此可以利用 jQuery.each：

$.each(classes, function (i, cls) {
    alert(cls);
});

Answer 3

@meder 正确地回答了你的问题，我只是想补充一点，如果枚举的顺序不重要，你可以随时使用这种简化的形式：

for ( var i = classes.length; i--; ) {
  alert( classes[i] );
}

它更短，更快。

Answer 4

添加到 meder 的答案...

有一种方法可以安全地迭代对象，而不会被对象的继承属性所困扰。 hasOwnProperty() 来救援：

for(var i in classes) {
  if (classes.hasOwnProperty(i)) {
    var safeValue = classes[i];
  }
}

Answer 5

我在此处看到了这个用法。

我不确定 (i in this) 与 0-n 的双重检查会消除什么。

var thisp = arguments[1];
for (var i = 0, len = this.length; i < len; i++){
  if (i in this){
    fun.call(thisp, this[i], i, this); // fun(element,index,array)
  }
}