Does jQuery selector iterates through all elements?

Question

I have multiple links on my page and I want to create the same event handler for all of them.

In the first example I am just using a selector and it creates the event handler correctly for both of the links:

$(document).ready(function () {
    $('.link').on('click', function () {
        alert($(this).text() + ' was clicked');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='#' class='link'>Link1</a>
<a href='#' class='link'>Link2</a>

In the second example, I iterate through each element and create the event handler for every single one of them:

$(document).ready(function () {
    $('.link').each(function(){
      $(this).on('click', function(){
        alert($(this).text() + ' was clicked');
      });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='#' class='link'>Link1</a>
<a href='#' class='link'>Link2</a>

Both are producing the same result, but why? Does jQuery selector already iterates through all the elements? Does jQuery selector always iterates all elements or only in certain scenarios?

Does this answer your question? jQuery .each() - Practical uses? — LW001
– LW001, Commented Sep 15, 2021 at 0:16
@LW001: The question that you have linked explain how each works, which is great... what I don't understand is: Does jQuery selector automatically iterate through all selectors? It seems it does... does jQuery selector always iterate through selector or are there particular scenarios? — Hooman Bahreini
– Hooman Bahreini, Commented Sep 15, 2021 at 0:22
@HoomanBahreini I think this answers your question: How can I learn how jQuery selectors work behind the scenes? — George Sun
– George Sun, Commented Sep 15, 2021 at 0:26
@GeorgeSun: that's really a different question, it's asking how does jQuery selector find an element. — Hooman Bahreini
– Hooman Bahreini, Commented Sep 15, 2021 at 0:29
If I'm understanding it correctly you're looking for Implicit iteration, TL;DR: Selecting ($('.link')) returns a selection, like a list of items. Depending on what you do with it, implicit iteration might take place (Usually with setters like .on() in your example), if you need a function that doesn't implicitly iterate (Usually Getters) you'll want to iterate yourself using .each() — LW001
– LW001, Commented Sep 15, 2021 at 0:30

LW001 · Accepted Answer · 2021-09-15 00:47:25Z

The concept you're looking for is called Implicit iteration.

It is mentioned in the jQuery Documentation for .each():

Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration. When this occurs, it is often unnecessary to explicitly iterate with the .each() method.

Selecting something using $('.link') returns a selection, which is like a list of items meeting the criteria laid out in your selector (Elements with the class link in this case). The selection itself does not iterate over anything, it just provides you with a list of items.

Depending on what you do with the Selection afterwards, implicit iteration might take place. That is for example the case with most setters (in your case .on()). Setters will iterate over the selection and apply to all items in it.

Functions that don't implicitly iterate (Usually Getters) are where you want to iterate yourself using .each() if you need them run on multiple items.

Collectives™ on Stack Overflow

Does jQuery selector iterates through all elements?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related