Detailed explanation and examples of jQuery's each function

We know that in JQuery, the each function is very powerful and can traverse a lot of data. So this time I will give you a detailed introduction to the use of jQuery's each function and an example.

$.each() is different from $(selector).each(). The latter is specially used for traversing jquery objects. The former can be used to traverse any collection (whether it is an array or an object). If it is an array, Callback function Each time the index of the array and the corresponding value are passed in (the value can also be obtained through the this keyword, but javascript will always wrap this value as an object - even if it is a string or a number) , the method will return the first parameter of the traversed object. The

each() method can make the DOM loop structure concise and less error-prone. The each() function encapsulates a very powerful traversal function and is very convenient to use. It can traverse

one-dimensional arrays, multi-dimensional arrays, DOM, JSON, etc.

Using $each during the JavaScript development process can greatly reduce our workload.

Here are some common uses of each

each processes one-dimensional arrays

var arr1 = [ "aaa", "bbb", "ccc" ]; 
$.each(arr1, function(i,val){ 
  alert(i); 
  alert(val);
});

alert(i) will output 0, 1, 2

alert(val) will output aaa, bbb, ccc

each processing

two-dimensional array

vararr2 = [['a','aa','aaa'], ['b','bb','bbb'], ['c','cc','ccc']]
$.each(arr, function(i, item){
  alert(i);
  alert(item);
});

arr2 is a two-dimensional array, item is equivalent to taking this two-dimensional array each array in the array.

item[0] is relative to taking the first value in each one-dimensional array

alert(i) will output 0, 1, 2, because this two-dimensional array contains 3 array elements

alert(item) will be output as ['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', ' cc', 'ccc']

After slightly changing the processing of this two-digit array

var arr = [['a', 'aa', 'aaa'], ['b','bb','bbb'], ['c','cc','ccc']]
$.each(arr, function(i, item){
　$.each(item,function(j,val){
　　　　 alert(j);
　　　　alert(val);
　});
});

alert(j) will output 0, 1, 2, 0, 1, 2, 0, 1, 2

alert(val) will output a, aa, aaa, b, bb, bbb, c, cc, ccc

each processes json data, this each has Even more powerful, you can loop through each attribute

var obj = { one:1, two:2, three:3};
$.each(obj, function(key, val) {
  alert(key);
  alert(val);
});

Here alert(key) will output one two three

alert(val) will output one, 1 , two, 2, three, 3

Why is the key here not a number but an attribute? Because the json format is a set of unordered attributes-values. Since it is unordered, where are the numbers?

And this val is equivalent to obj[key]

ecah processes dom elements. Here, an input form element is used as an example.

If you have such a code in your dom

and then you use each as follows

$.each($("input:hidden"),function(i,val){
  alert(val);
  alert(i);
  alert(val.name);
  alert(val.value);
});

Then, alert(val) will output [object HTMLInputElement], because it is a Form elements.

alert(i) will output 0, 1, 2, 3

alert(val.name); will output aaa, bbb, ccc, ddd, if this.name is used, it will output The same result

alert(val.value); will output 111,222,333,444. If you use this.value, the same result will be output

If you change the above code into the following form

$("input:hidden").each(function(i,val){
  alert(i);
  alert(val.name);
  alert(val.value);
});

You can see that the output results are the same. As for the difference between the two writing methods, I don’t know yet. This change will produce the same results when applied to the array operations above.

In this way, the actual results of several examples have been answered. Then continue to study, you can never know what is happening and why.

It can be seen from the above examples that both jQuery and jQuery objects implement this method. For jQuery objects, the each method is simply delegated: the jQuery object is passed as the first parameter to jQuery's each method. .

Look at the implementation of each in jQuery (network excerpt)

function (object, callback, args) {
//该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数args
var name, i = 0,length = object.length;
if (args) {
  if (length == undefined) {
    for (name in object) {
      if (callback.apply(object[name], args) === false) {
        break;
      }
    }
  }
  else{
    for (; i < length;) {
      if (callback.apply(object[i++], args) === false) {
        break;
      }
    }
  }
}
else{
  if (length == undefined) {
    for (name in object) {
      if (callback.call(object[name], name, object[name]) === false) {
        break;
      }
    }
  }
  else{
    for (var value = object[0]; i < length && callback.call(value, i, value) !==false; value = object[++i]) {}
      /*
      object[0]取得jQuery对象中的第一个DOM元素，通过for循环，
      得到遍历整个jQuery对象中对应的每个DOM元素，通过 callback.call( value,i,value);
      将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；
      其中callback是类似于 function(index, elem) { ... } 的方法。
      所以就得到 $("...").each(function(index, elem){ ... });
      */
    }
  }
  return object;
}

jquery will automatically judge based on the incoming elements, and then decide whether to apply or call based on the judgment result Method processing. In the implementation of fn, you can directly use this pointer to reference the sub-elements of the array or object.

1. The obj object is an array

The each method will call the fn function one by one on the sub-elements in the array until the result returned by calling a sub-element is false. In other words, we It can be processed by the provided fn function to exit the each method call after meeting certain conditions. When the each method provides the arg parameter, the parameter passed in by the fn function call is arg, otherwise: the sub-element index, the sub-element itself

2.obj The object is not an array

This method is the same The biggest difference between 1 and 1 is that the fn method will be executed one by one regardless of the return value. In other words, all properties of the obj object will be called by the fn method, even if the fn function returns false. The parameters passed in the call are similar to 1.

# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

What does the JS engine look like when running

How to use the jssplice() method in JS development

How to download and install nodejs

The above is the detailed content of Detailed explanation and examples of jQuery's each function. For more information, please follow other related articles on the PHP Chinese website!