Question

I running into some performance issues with a jquery script I wrote when running in IE so I’m going through it trying to optimize any way possible. Apparently using for loops is way faster than using the jQuery .each method. This has led me to a question regarding the equivalent of $(this) inside a for loop. I’m simplifying what I’m doing in my loop down to just using an attr() function as it gets across my main underlying question.

Im doing this with each(simplified)

var existing = $('#existing').find('div');
    existing.each(function(){
    console.log($(this).attr('id'));
});

And I’ve tried rewriting it as a for loop as such:

var existing = $('#existing').find('div');
for(var i = 0;i < existing.length;i++)
{
    console.log(existing[i].attr('id'));
}

Its throwing an error saying:

Uncaught TypeError: Object #<HTMLDivElement> has no method 'attr'

Answer 1

You need existing.eq() to get jQuery object, existing[] gives you DOM object. The function attr() should be called with jQuery object but not with DOM (javascript) object.

var existing = $('#existing');
for(var i = 0;i < existing.length;i++)
{
    console.log(existing.eq(i).attr('id'));
}

You can use each to get index without for loop.

existing.each(function(index, item){
     alert(index);
     alert(item);
});