Introduction to each() of jquery and detailed examples of its traversal method

Theeach() 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.
injavaScriptUsing $each during the development process can greatly reduce our workload.
Here are some commonly used uses of each

1. Each processes a one-dimensional array

  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

2. Each handles two-dimensional array 　

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

arr2 is a two-dimensional array, and item is equivalent to taking each array in this two-dimensional 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 as a, aa, aaa, b, bb, bbb, c, cc, ccc

each processes json data, this each is even more powerful, it can loop through every 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 a piece of code like this in your dom

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden"  value="444"/>

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 Outputs [object HTMLInputElement] because it is a form element.

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

alert(val.name); will output aaa, bbb, ccc, ddd, if you use this. name will output the same result

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

jquery will automatically judge based on the incoming elements, and then based on The judgment result is processed by the apply or call method. In the implementation of fn, you can directly use this pointer

to reference

the child element 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 subelement index, the subelement 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.

Three traversal methods1. Selector + traversal

$('div').each(function (i){

i is the index value

this means traversing each

dom object

});

2 , selector + traversal

$('div').each(function (index,domEle){

index is the index value

domEle means to traverse each dom Object

});

3. A more suitable traversal method

1) Get a collection object first

2) Traverse each of the collection objects An element

var d=$("div");

$.each(d,function (index,domEle){

d is the collection to be traversed

index is the index value

domEle means to traverse each dom pair

});

The above is the detailed content of Introduction to each() of jquery and detailed examples of its traversal method. For more information, please follow other related articles on the PHP Chinese website!