Home/ Questions/Q 8476607
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T18:13:34+00:00

I am really confused about each function. JsFiddle <html> <head> <script type=text/javascript src=jquery-1.8.0.min.js></script> <script>

  • 0

I am really confused about each function.

JsFiddle

<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
        <script>
        $(document).ready(function(){
            //$(".a").click(function(){
            //  alert("hi");
            //});
            $(".a").each(function(){
                $(this).click(function(){
                    alert("hi");
                });
            });
        });
        </script>
    </head>
    <body>
    <div class="a">hi</div>
    <div class="a">hi</div>
    </body>
</html>

What’s the difference between using .click function directly and using .each? Both of them works.

Thanks a lot.

EDIT

If these two methods are the same, could you please give an example why .each is necessary?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Actually there is a difference here. With .each you create a new function in every iteration and each element gets a different function object assigned as event handler.
    This is not the case if you call .click on the whole selection. It will use the function you pass to it as event handler for each element. The behaviour in the end is the same though.

    You could avoid creating a new function object by creating it once before you iterate over the elements:

    var handler = function(){
    alert("hi");
};
$(".a").each(function(){
    $(this).click(handler);
});

    But it is unnecessary to do so. .click calls .on internally which in turn will call .each to iterate over the selected elements and bind the event handler.

    .each is just a generic way to iterate over the elements and do whatever you want with them. For example, you might want to replace a word inside each element by another word:

    $('a').each(function() {
    $(this).text($(this).text().replace('foo', 'bar'));
});

    This is not a very good example because also here there is a neater way to do it, but I hope it gives you some idea.

    Why is there a performance difference between these two ways?

    The outer .each call is redundant and adds an additional overhead. The “call chain” will look similar to this:

    each (1 time)
  -> callback (N times)
    -> click (1 time) (N times in total)
      -> on (1 time) (N times in total)
        -> each (1 time) (N times in total)
          -> callback (which ultimately adds the event handler) (1 time) (N times in total)

    In comparison, this is roughly what happens when you call .click directly:

    click (1 time)
  -> on (1 time)
    -> each (1 time)
      -> callback (which ultimately adds the event handler) (N times)

    So not only are more functions executed, but additional, the same functions (like .click nad .on) are executed multiple times. Each function might make checks or initialise variables once per call, so obviously if you call it multiple times, it will take more time.

    • 0