For Statement using This vs jQuery Each?

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 s开发者_StackOverflowtatement with this ?

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

}

I assume the reason you don't want to use $.each is because it's slow. The reason it's slow is because it's jQuery. so drop jQuery and use the DOM.

var els = document.getElementsByClassName("class");
for (var i = 0, ii = els.length; i < ii; i++) {
  var el = els[i];
  var src = el.src;
}

You will need a shim for getElementsByClassName if you care about legacy browsers.

This should be equivalent to your jQuery foreach loop:

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

    var elem = $(elemList[i]);
    var myClassSrc = elem.attr('src');
    ...
}

You don't need to worry about this if you use the plain for loop. In the jQuery version, jQuery will bind this to the current element in the collection being iterated. In the non-jQuery version, that is equivalent to elemList[i].

Note that "class" is not the best variable name in the world to use, so I changed it to "elemList". It is, in fact, a reserved word in JavaScript.