Question

I am trying to move from $.each() to a for() statement but experiencing some issues with the usage of $(this) in the later ?

i.e. assume I have this function

$('.class').each(function() {

var myVar = $(this);
var myVarSrc = myVar.attr('src');
...

The problem I experiencing is that when I attempt to move this to a for statement

var class = $('.class');
for (var i = 0; i < class.length; i++) {

var myClass = $('.class')[i];
var myClassSrc = myClass.attr('src');
...

The later doesn’t bind to each meaning that myClassSrc – if it’s the same – will overwrite ? How can I use a for statement with this ?

Answer 1

Doing [i] extracts the native DOM element.

If you do that, you should access the .src property directly.

var cls = $('.class');
for (var i = 0; i < cls.length; i++) {

var myClass = cls[i];
var myClassSrc = myClass.src;

…or use the eq()^[docs] method to get a jQuery object with the element for the given index:

var cls = $('.class');
for (var i = 0; i < cls.length; i++) {

var myClass = cls.eq(i);
var myClassSrc = myClass.attr('src');

Also notice that I removed the $('.class') from inside the loop. You should use the cached version you made before the loop.

I also changed the variable name from class to cls since class is a future reserved word in JavaScript.

---

Based on the comments below, you’ve come a cross a very common issue. Because you’re assigning event handlers inside the for loop, and because JavaScript does not have block scope, this means that every handler you create in the loop is referencing the same myClassSrc variable, which will be set at whatever value it was after the loop completed.

In order to scope a variable, you need to create the event handler in a new variable scope that references the value in the current iteration. To do this, we simply pass whatever value we want to retain into a function invocation, and create the handler there:

function set_up_handler( elem ) {

    var myClassSrc = elem.src; // <-- now this is a local variable referencing
                               //       the "src" of the element passed in.

    elem.addEventListener( 'click', function() {
        alert( myClassSrc );  // <-- this will reference the local "myClassSrc"
    }, false );

}

var cls = $('.class');
for (var i = 0; i < cls.length; i++) {

    var myClass = cls[ i ];

    set_up_handler( myClass ); // <-- pass the current element into a function

}