$(element).each()と $.eachの違い

Question

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

上記のような2つのコードがあるのですが、1) は複数の要素に対して処理することができる、また2) は配列やオブジェクトにも処理することができるあるのですが、本質的にどのような違いがあるのかがわかりません。

A)例えば$.ajaxもJqueryに対して直接ドット.でつないでいるため、jquery本体のメソッドを利用しているように思えるのですがそのような理解であっているのでしょうか？
つまり、Jqueryオブジェクトまたはそれより上位の参照すべきオブジェクトにはeachメソッドやajaxメソッドが存在しているということであっていますでしょうか？

B) 反対に1)の場合にはDOM要素をJqueryオブジェクトでラッピングした中にeachメソッドがあるので$(element).eachで$(element)にあるeachが利用できているのでしょうか？それとも、結局メソッドチェーンの考え方で1)のケースでも本体JQueryオブジェクトのeachを参照しているのでしょうか？
とすると、冒頭で申し上げた処理に違いが生じるのはおかしいので、$(element)オブジェクトにあるeachメソッドとJqueryオブジェクト本体のeachメソッド別物である気もするのですが。。

どなたかお詳しい方アドバイスをいただけると嬉しいです。
よろしくお願い申し上げます。

Answer 1

jquery-3.3.1.js

jQuery.fn = jQuery.prototype = {
  // 中略

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

  // 後略

中でjQuery.each呼んでるだけでした。
引数にthisを渡すことで、$(element)に限定したeachを実行していますね。

Jqueryオブジェクト本体のeachメソッド別物である気もするのですが。。

確かに実装上は別物ですが、その実、中ではまったく同じ処理をしているだけです。

冒頭のリンクでjQueryのソースを読むことができます。
全部読んでみるといい勉強になると思いますよ。

Comments

[pegy]

コメントありがとうございます。
JQueryのコードを直接見たことがなかったため、このような視点で学習することがとても勉強になりました。今後に活かしてまいりたいと思います。

Answer 2

動作は同じですね、いくつかサンプル

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

配列やオブジェクトをjQueryで回すには$.eachで指定するしかないですからね

  //配列
  $.each([1,2,3],function(x,y){
    console.log(x+":"+y);
  });
  //オブジェクト
  $.each({"a":1,"b":2,"c":3},function(x,y){
    console.log(x+":"+y);
  });

これが普通の配列を回すforEachだとインデックスとデータが逆になります

  [4,5,6].forEach(function(x,y){
    console.log(x+":"+y);
  });
  [].forEach.call([4,5,6],function(x,y){
    console.log(x+":"+y);
  });
  //forEachではオブジェクトはまわせない
  [].forEach.call({"a":4,"b":5,"c":6},function(x,y){
    console.log(x+":"+y);
  });

ちなみに、NodeListとHTMLCollectionでも動作が違います

<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);
  });
  //以下拾えないかも
  document.getElementsByClassName('hoge').forEach(function(x,y){
    console.log(y+":"+x.textContent);
  });
});
</script>
<div class="hoge">1</div>
<div class="hoge">2</div>
<div class="hoge">3</div>

Comments

[pegy]

コメントありがとうございます。
また、遅くなり誠に申し訳ございません。
と申し上げるのも、おっしゃっていたコードを自分でも実行しながら学んでみたのですが、
NodeListとHTMLCollectionの点が全く未知の世界であったため、いろいろな記事を読みながら紐解いていました。正直まだ腹落ちしてにないのですが、経過日数に隔たりができてしまったため、やはり一度案件をクローズしたいと思います。
本件の本質については理解ができたので、改めて感謝いたします。