Why is this Javascript loop taking one minute for 100 iterations?

I am using the below code in my program but it seems that these few line of code is taking too much time to execute. For 100 iteration it is consuming 1 mins approx. for 200+ iteration my broser is showing a warning message that script is taking too much time. As per the scenario开发者_JAVA百科 500+ ids can be pushed into the array.

for (var i = 0; i < arrid.length; i++)
{
    $("#" + outerDiv + "> div[id=" + arr[i] + "]").attr("class", "selected");
}

arrid is an array of div ids. Outerdiv is the the parent div of all these div ids present in arrid. arr ids cannot be accessed directly, it has to be referenced using the parent div i.e. outerDiv.

One quick thing you could do is cache your selector so jQuery does not have to query the dom 500+ times.

var $div = $("#" + outerDiv);

for (var i = 0; i < arrid.length; i++)
{
    $div.children("div[id=" + arr[i] + "]").attr("class", "selected");
}

On second thought, since you have a list of id's, you shouldn't need any of that as the id should be unique per the dom.

for (var i = 0; i < arrid.length; i++)
{
    $("#" + arr[i]).attr("class", "selected");;
}

If outerDiv is an element, you can write

for (var i = 0; i < arrid.length; i++)
{
    $("#" +arr[i], outerDiv).attr("class", "selected");
}

But assuming the id's are unique, you shouldn't need to reference the outer div at all. It might even be faster not to.

Also, if this is all you're doing and you're concerned about performance, why not just use plain ol' javascript?

for (var i = 0; i < arrid.length; i++)
{
    document.getElementById(arr[i]).className = "selected";
}

Using jQuery function is expensive - as is manipulating the DOM.

You can reduce to one call to jQuery like this:

var divSelector = [];
for (var i = 0; i < arrid.length; i++)
{   // add selector to array
    divSelector.push( "#" + outerDiv + "> div[id=" + arr[i] + "]" );
}
// execute jquery once with many selectors
$(divSelector.join(',')).attr("class", "selected");

This code is untested, but should work in principal.

Don't call jQuery selection function too many times

Instead select your elements once and do the rest in a different way. For this thing to work it would be better to convert your arr array of IDs into an accosiative array that can make searching much much faster.

// convert arr = ["idOne", "idTwo", ...]
// into an associative array/object
// a = { idOne: true, idTwo: true, ... }
var a = {};
$.each(arr, function(index, el){
    a[el] = true;
})

// do the rest
$("#" + outerDiv " > div[id]").each(function(){
    if (a[this.id] === true)
    {
        $(this).addClass("selected");
    }
})

The most inner call can be as well replaced with:

this.className = "selected"

when you can be sure no other classes will be added to the element.

But when you want to set selected on all child div elements (if your IDs cover all elements) then a simple:

$("#" + outerDiv " > div[id]").addClass("selected");

would do the trick just fine.

Store the instance into a variable($div) and use another variable to store the max length the loop for will do.

var $div = $("#" + outerDiv);
for (var i = 0, max = arrid.length; i < max; i++)
{
    $div.children("div[id=" + arr[i] + "]").attr("class", "selected");
}

How about this as you have the id's of all the elements you are trying to change the class on:

for (var i = 0; i < arrid.length; i++)
{
    $("#" + arr[i]).addClass("selected");
}

I know using the selector div[id=val] performs very slow is certain browser based on a speed test I ran, worth a look as it is pretty interesting:

http://mootools.net/slickspeed/

I think you can directly push jQuery object to the array, then you can just arr[i].attr('class', 'selected')