JQuery .each() replacement (for..in)

Question

Is it possible to replace .each() with for..in loop?

$('.my_class').each(function() {
  ...
});

Selector $('.class') is not returning an array of objects, but "just" objects.

You can see this with:

console.log($('.my_class'));

Considering that this is not an array of objects => it is not possible to iterate through all found objects with for..in loop?

Is .each() the only solution?

What do you mean, "just objects"? What do you want to do with a for/in that you can't do with `each`? — Dave Newton, May 15 '14 at 17:31
I've just tried it and yes `for` loop works for the `$(...)`, in fact `$(...)` is some **extended** array http://jsfiddle.net/aEwE4/ — King King, May 15 '14 at 17:31
If you mean `for .. in` then No, `for .. in` will loop through the properties of an object, not the items in a collection/list, in the case of array, you will get the index of item via the counter variable. — King King, May 15 '14 at 17:34
adeneo: I can use each, just was curious if any replacement exists. — ihtus, May 15 '14 at 17:37
*returns you an Array of native DOM selections I mean - . eg to be able to do `$('.my_class').get(i).innerHTML='...` , or similar. Which is what I think you are asking for. — Rob Sedgwick, May 15 '14 at 17:38
There are a bunch of ways to do it, but .each() seems like the most appropriate, but it all depends on what you're doing. — adeneo, May 15 '14 at 17:38

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Selector $('.class') is not returning an array of objects, but "just" objects.

It returns a jQuery object. A jQuery object can be seen as a collection of HTML elements.

As a jQuery object supports the .length property and the [] accessor, it could be seen as an array of HTML Elements, though it is really not.

Considering that this is not an array of objects => it is not possible to iterate through all found objects with for..in loop?

Using the .length and [] directly in the $('.my_class'), you can use for loops.

But don't use for..in, as it iterates through the properties of a JavaScript object, not through the indexes of an array.

Is .each() the only solution?

Being a "solution", of course, depends on the problem. But if you are asking about alternatives, if you must use the for loop, you could:

var elements = $('.my_class'), i, n, element;
for (i = 0, n = elements.length; i < n; i++) {
    element = elements[i];
    // do stuff with element (it is an HTML Element)
}

Though, if you really need an array of elements, you can call the .get() or, better, the .toArray() function in the jQuery object:

// here, elementsArray is really an array of HTML Elements
var elementsArray = $('.my_class').toArray();

In fact we can consider the indices are some special kind of properties (which can't be accessed via the dot `.`, instead we have to use `[]`), we can still use the `for ... in` but we have to check variable `i` (in `for(var i in ...)`) to be sure it is *numeric*, then we can access to the element using `[]` normally. [Demo here](http://jsfiddle.net/viphalongpro/aEwE4/2/) — King King, May 15 '14 at 19:17
@KingKing That's right (as you already know :). The thing with `for..in`, and the reason I always point it out, is that is is frequently misunderstood and thus misused. But your demo shows the code of someone who understands that loop's characteristics and uses it effectively. — acdcjunior, May 15 '14 at 19:26

score 0 · Answer 2 · answered May 15 '14 at 17:41

Selector $('.class') is not returning an array of objects, but "just" objects.

It actually returns a jQuery object, which is an object with an array-like structure.

As mentioned in the comments, you can get array with the elements using $('.class').get().

Since it's still an array, I wouldn't recommend the for...in loop, which should be used to iterate object properties rather than arrays. Even though it will work, I'll recommend a "normal" for loop e.g.

var elements = $('.myclass').get();

for(var i = 0; i < elements.length; i++)
    console.log(elements[i]);

http://jsfiddle.net/5ygMa/

Is this what you're asking for?

JQuery .each() replacement (for..in)

2 Answers2