Question

When I am using jquery each and calling not inside each is giving performance impact on IE Browser with error, ‘Stop running the script’.

Using, $("li:not(.sel)", this).hide(); statement getting the performance issue.

Tried with $("li", this).not(".sel").hide(); also $("li[class != sel]", this).hide();

When I use $("li[class != sel]", this).hide();, In IE8 handled performance and not getting the stop script message.

In FF all the three are working perfectly.

In IE7 getting the ‘Stop running the script’ message for all the three.

Please help me out on this.

Thanks in advance.

Edit:
These li’s are the list of filter options like in eBay.
By default I show only 5 li’s at first. When I click on the link called ‘choose more’ under the filters. I open a modal window and select the list of options in checkboxes and on submit I will append the ‘sel’ class to the selected li’s. Finally in the logic the li’s with no ‘sel’ are hidden. These li’s can be more than 400 or less. Depends on the data. User has the right to select all the li’s.

Thanks for the response. Please give me some ideas 🙂

Answer 1

Well, it’s obviously a performance problem. My guess it’s because jQuery first collects a list of all items before looping over them.

I don’t think there is a way in jQuery to avoid that, so I would suggest not to use jQuery but regular DOM methods instead to loop over the items:

var item = this.firstChild; // Assuming "this" is the parent of the list items
while (item) {
  $(item).filter(":not(.sel)").hide();
  item = item.nextSibling;
}

I’m using jQuery inside the loop again, which is simpler, but also slower. You may need to fallback to DOM methods there, too:

if (item.tagName == "LI" && item.className != "sel") {
  item.style.display = "none";
}