Iterating over jQuery $(this).attr('class').split(" ") gives odd results

Question

I've got a page where I'm trying to fetch arrays of classes for lots of divs which share a common class. For example:

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

I want to fetch each common class div and get an Array of it's classes. At the moment, I'm doing it by using this bit of jQuery:

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

Looking at the first resulting classes variable gives this:

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

The problem is that the for(var i in classes) seems to be iterating over the __proto__ Array and delving down into that as well - has anybody ever come across this before? I'm using the latest version of Chrome (6.0.453.1).

score 17 · Accepted Answer · answered Jul 05 '10 at 17:23

17

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

Iterate through an array with a regular for loop, not a for...in otherwise it enumerates through the array's properties ( since its still an object and has other properties in addition to the elements inside ).

answered Jul 05 '10 at 17:23

meder omuraliev

183,342
71
393
434

2

+1 avoid gotchas :) http://stackoverflow.com/questions/3154215/what-are-the-most-common-causes-of-errors-in-javascript-and-how-to-fix-them/3154285#3154285 – gblazex Jul 05 '10 at 17:25
Also note that for..in is not guaranteed to access the indices in numeric order (see [MDC](https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Statements/for...in)) – Matthew Flaschen Jul 05 '10 at 17:25
true, fortunately it's not an issue here – gblazex Jul 05 '10 at 17:28
ecmascript 5 will also support `Array.forEach()` natively, – jAndy Jul 05 '10 at 17:33
Thanks meder, that's exactly what I was looking for. Now I know! – Sam Starling Jul 06 '10 at 09:47

Ates Goral · Answer 2 · 2012-12-23T08:04:41.547

4

To add to the other valid answers, since you're already using jQuery, you can take advantage of jQuery.each:

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

edited Dec 23 '12 at 08:04

answered Jul 05 '10 at 17:41

Ates Goral

137,716
26
137
190

score 2 · Answer 3 · answered Jul 05 '10 at 17:27

2

@meder answered your question just right, i've just wanted to add, that if the order of the enumeration is not important, you can always use this simplified form:

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

It is shorter, and faster.

answered Jul 05 '10 at 17:27

gblazex

49,155
12
98
91

1

Or if you want even faster, use a negative while loop. – Anders Jul 05 '10 at 17:44
that's one more line of code, for almost **no benefit**. The real issue here is **readability**. This form does well on every field. – gblazex Jul 05 '10 at 17:58

score 1 · Answer 4 · answered Apr 26 '12 at 18:34

Adding to meder's answer...

There is a way of iterating over objects safely without being annoyed by the inherited properties of an object. hasOwnProperty() to the rescue:

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

score 0 · Answer 5 · edited Feb 05 '12 at 19:43

0

I've seen this used here.

I'm not sure what the (i in this) double-check against 0-n weeds out.

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

edited Feb 05 '12 at 19:43

LoveAndCoding

7,857
2
31
55

answered Feb 04 '12 at 22:29

Skews Me

1
1

1

The `i in this` check is because [JavaScript arrays are sparse](http://stackoverflow.com/questions/1510778/are-javascript-arrays-sparse). It's not necessarily true that every integer from 0 to `length` is actually an element of the array. – Cheran Shunmugavel Feb 05 '12 at 21:27

Iterating over jQuery $(this).attr('class').split(" ") gives odd results

5 Answers5