jQuery: Converting each function to for loop

Question

I recently had received the help of you great people on stackoverflow to help me move a background image the appropriate distance on a mouseover event. This works great, but the problem is that I'm concerned how optimal it is using the each function.

I'm hoping I can get a brief explanation on how to convert this particular code to a for loop as I'm interested in the optimization benefits, but I'm not quite understanding the difference in syntax for how to convert it to a for loop.

var xPosition = -195;
$('div.style-swatches ul li').each(function(){
    $(this).mouseenter(function(){
        $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
    });
});

Answer 1

Simply don't use the .each()

Demo fiddle

$("div.style-swatches li").mouseenter(function() {
     $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
});

Answer 2

Never optimize without benchmarks. First profile your code, collect real data, see what function call really takes up a lot of time/memory and then optimize the discovered performance bottlenecks.

In your particular case, I'd expect the DOM queries to take a few orders of magnitude more time than the loop construct. You could think about simplifying your CSS queries (eg changing div.style-swatches ul li to .style-swatches li if appropriate), use the native DOM instead of wrapping everything in a jQuery object,...

As some other answers already pointed out, you don't actually need the loop at all, as .mouseenter() already does that (and uses a .each() loop internally).

Answer 3

Any selection uses a for loop under the covers. Basically, any time you see $(".css-selector") think, "For all matching elements". In your code the .each(...) just makes the process more explicit.

If you really wanted to break this out into a for loop, you could use your selector and then index the elements directly, a la:

var elems = $('div.style-swatches ul li');
for (var i = 0; i < elems.length; ++i){
  $(elems[i]).mouseenter(function(){
        $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
    });

}

But again, since jQuery already does this itself, it's doubtful you'll see any beneficial performance impact.

Answer 4

The jquery selector returns an array. You can just iterate on it

var xPosition = -195;
var elements = $('div.style-swatches ul li');
for(var i = 0; i < elements.length; i++) {
    $(elements[i]).mouseenter(function() {
        $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
    });
}

Answer 5

$('div.style-swatches ul li') returns and array of items ..just loop it

var xPosition = -195;
var items     = $('div.style-swatches ul li');

for (var i = 0, l = items.length; i < l; i++) {
    $(items[i]).mouseenter(function(){
        $(items[i]).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(items[i]).index() * 195)) + "px 0");
    });
}