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");
    });
});

For someone who doesn't understand enough to make the conversion, you sound terribly sure that converting this to a loop will "optimize" it. — Jon
– Jon, Commented Oct 30, 2013 at 22:42
You're technically already using a for loop; jQuery is just doing it for you. — ps2goat
– ps2goat, Commented Oct 30, 2013 at 22:42
The performance gain is going to be marginal if any at all since this is essentially what jQuery is doing for you — megawac
– megawac, Commented Oct 30, 2013 at 22:43
For the record, what you should do here is just $('div.style-swatches ul li').mouseenter(function() { ... }). There's no need for each at all. — Jon
– Jon, Commented Oct 30, 2013 at 22:43
Here is jQuery's implementation of $.each for anyone who wants to know. I was curious if they had implemented it using Array.prototype.forEach where possible. — kojiro
– kojiro, Commented Oct 30, 2013 at 22:52

Roko C. Buljan · Accepted Answer · 2013-10-31 02:12:42Z

4

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");
});

edited Oct 31, 2013 at 2:12

answered Oct 30, 2013 at 22:43

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Hoffmann Over a year ago

Nice catch, i keep forgetting that you can assign directly and jQuery loops internally. Also IIRR jQuery uses loop unrolling/unwinding under the cover for speed optimizations

Mattias Buelens · Accepted Answer · 2013-10-30 22:44:02Z

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 (e.g. 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).

answered Oct 30, 2013 at 22:44

Mattias Buelens

20.2k4 gold badges47 silver badges52 bronze badges

1 Comment

Brett D Over a year ago

This is great advice. Thank you for sharing it and expanding on simplifying the CSS query. Much appreciated.

Gopherkhan · Accepted Answer · 2013-10-30 22:52:41Z

1

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.

edited Oct 30, 2013 at 22:52

answered Oct 30, 2013 at 22:42

Gopherkhan

4,3424 gold badges36 silver badges54 bronze badges

Comments

Thomas · Accepted Answer · 2013-10-30 22:42:43Z

0

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");
    });
}

answered Oct 30, 2013 at 22:42

Thomas

1,43011 silver badges25 bronze badges

Comments

Robert Hoffmann · Accepted Answer · 2013-10-30 22:43:42Z

0

$('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");
    });
}

answered Oct 30, 2013 at 22:43

Robert Hoffmann

2,43622 silver badges30 bronze badges

Collectives™ on Stack Overflow

jQuery: Converting each function to for loop

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related