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

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

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

Answer 2

添加到 meder 的答案...

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

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

Answer 3

我见过这个用过here。

我不确定 (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)
  }
}

Answer 4

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

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

它更短，更快。

Answer 5

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

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