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?](https://stackoverflow.com/questions/722815/jquery-each-practical-uses) — LW001, Sep 15 '21 at 00: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, Sep 15 '21 at 00:22
@HoomanBahreini I think this answers your question: [How can I learn how jQuery selectors work behind the scenes?](https://stackoverflow.com/questions/11631711/how-can-i-learn-how-jquery-selectors-work-behind-the-scenes) — George Sun, Sep 15 '21 at 00:26
@GeorgeSun: that's really a different question, it's asking how does jQuery selector find an element. — Hooman Bahreini, Sep 15 '21 at 00:29
If I'm understanding it correctly you're looking for [Implicit iteration](http://jqfundamentals.com/chapter/jquery-basics#:~:text=getters%2C%20setters%2C%20and%20implicit%20iteration), 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, Sep 15 '21 at 00:30
@LW001: Thanks, that link that you have put there is exactly what I was looking for. — Hooman Bahreini, Sep 15 '21 at 00:33

score 1 · Accepted Answer · answered Sep 15 '21 at 00:47

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.

Does jQuery selector iterates through all elements?

1 Answers1