Home>

1) $(element) .each ()
2) $.each

There are two codes as shown above. 1) can handle multiple elements, and 2) can handle arrays and objects. I don't know what the difference is.

A) For example, it seems that $.ajax is directly connected to Jquery with a dot, so it seems to be using the method of jquery itself.
In other words, does this mean that each method or ajax method exists in the Jquery object or higher-level object to be referenced?

B) On the other hand, in the case of 1), there is a each method while wrapping a DOM element with a Jquery object. ? Or in the case of 1) in the case of the method chain concept, do you refer to each body JQuery object each?
Then, since it is strange that the processing I mentioned at the beginning is different, I feel that each method in $(element) object is different from each method in Jquery object body. .

I would be happy if someone could give me some advice.
Thanks for your consideration.

  • Answer # 1

    jquery-3.3.1.js

    jQuery.fn = jQuery.prototype = {
      // omission
      // Execute a callback for every element in the matched set.
      each: function (callback) {
        return jQuery.each (this, callback);
      },
      // Omitted

    I just calledjQuery.each.
    By passingthisas an argument, you are executingeachlimited to$(element).

      

    I feel like it's different from each method of the Jquery object itself. .

    Although it is different on the implementation, in fact, it is just doing the same process.

    You can read the jQuery source at the top link.
    I think that reading it all will be a good study.

  • Answer # 2

    The behavior is the same, some samples

    <script>
    $(function () {
      $('. hoge'). each (function () {
        console.log ($('. hoge'). index ($(this)) + ":" + $(this) .text ());
      });
      $.each ($('. hoge'), function () {
        console.log ($('. hoge'). index ($(this)) + ":" + $(this) .text ());
      });
    </script>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    The only way to rotate an array or object with jQuery is to specify it in $.each

    // array
      $.each ([1,2,3], function (x, y) {
        console.log (x + ":" + y);
      });
      //object
      $.each ({"a": 1, "b": 2, "c": 3}, function (x, y) {
        console.log (x + ":" + y);
      });


    If this is a forEach that rotates an ordinary array, the index and data are reversed

    [4,5,6] .forEach (function (x, y) {
        console.log (x + ":" + y);
      });
      [] .forEach.call ([4,5,6], function (x, y) {
        console.log (x + ":" + y);
      });
      // ForEach does not mix objects
      [] .forEach.call ({"a": 4, "b": 5, "c": 6}, function (x, y) {
        console.log (x + ":" + y);
      });

    By the way, NodeList and HTMLCollection work differently

    <script>
    window.addEventListener ('DOMContentLoaded', function (e) {
      / * NodeList * /
      [] .forEach.call (document.querySelectorAll ('. hoge'), function (x, y) {
        console.log (y + ":" + x.textContent);
      });
      document.querySelectorAll ('. hoge'). forEach (function (x, y) {
        console.log (y + ":" + x.textContent);
      });
      / * HTMLCollection * /
      [] .forEach.call (document.getElementsByClassName ('hoge'), function (x, y) {
        console.log (y + ":" + x.textContent);
      });
      // You may not pick up below
      document.getElementsByClassName ('hoge'). forEach (function (x, y) {
        console.log (y + ":" + x.textContent);
      });
    });
    </script>
    <div>1</div>
    <div>2</div>
    <div>3</div>

Related articles