CODEWITHSUNDEEP
javascriptjqueryperformance
Huangism
Huangism

Reputation: 16448

is there a difference between the jquery code here?

Here is the code block a

$('ul.filter li').each(function() {
    $(this).click(function(e) { //do something });
});

Here is code block b

$('ul.filter li').click(function(e) { //do something });

Don't these do the same thing? is one better than the other? Which one is the better/faster method? I would assume block b since it has less code but I want to confirm it here, thanks

Upvotes: 4

Views: 170

Answers (5)

nonopolarity
nonopolarity

Reputation: 151206

The second usage is called "implicit iteration" and is one of the cornerstones of jQuery.

For example, in JavaScript Definitive Guide, 6th Ed, p.530 for jQuery Basics:

Despite the power of the each() method, it is not very commonly used, since jQuery methods usually iterate implicitly over the set of matched elements and operate on them all. You typically only need to use each() if you need to manipulate the matched elements in different ways. Even then, you may not need to call each(), since a number of jQuery methods allow you to pass a callback function.

in http://jqfundamentals.com/chapter/jquery-basics

Implicit iteration means that jQuery automatically iterates over all the elements in a selection when you call a setter method on that selection. This means that, when you want to do something to all of the elements in a selection, you don't have to call a setter method on every item in your selection — you just call the method on the selection itself, and jQuery iterates over the elements for you.

Typically, when the library has this built-in as the standard way of doing it, it will be in general better and faster, or else they wouldn't have built it in.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 817030

The effect you see will be the same, but in the first case, every li element is assigned a new function, as you are creating the function object inside the each callback.

In the second case, there exists only one copy of the event handler, which means it uses less memory over all (although this is probably not measurable).

Internally, click calls on (in jQuery 1.7), which is iterating over the elements via each as well:

return this.each( function() {
    jQuery.event.add( this, types, fn, data, selector );
});

This is the case with many jQuery methods (most often noted in the documentation), so you are saving characters and memory by letting jQuery implicitly do this.

Upvotes: 7

ShankarSangoli
ShankarSangoli

Reputation: 69915

Both are more or less same and give the same results. The second code snippet will also internally run each loop and assign the click handler to each li element.

But yes the second code snippet is very clear and simple.

Upvotes: 1

Alessandro Pezzato
Alessandro Pezzato

Reputation: 8822

For Jquery philosophy, the second is better because it is shorter.

Upvotes: 1

Justin Niessner
Justin Niessner

Reputation: 245479

They would both have the same effect.

I would prefer the second only because it is more concise and you're creating a single anonymous function to handle the click rather than an anonymous function per element.

Upvotes: 2

Related Questions