Detailed explanation of how to use each in jquery_jquery

The each() function is a tool function provided by basically all frameworks. Through it, you can traverse the attribute values ​​​​of objects and arrays and process them. 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. In other words: the each method provided by jQuery is All sub-elements in the object provided by parameter 1 are called one by one. The each method provided by the jQuery object calls the sub-elements inside jQuery one by one.

The core code in JQUERY

Copy the code The code is as follows:

jQuery.prototype.each=function( fn, args ) {
return jQuery.each( this, fn, args );
}

Let’s see Let’s look at the specific implementation of each method provided by jQuery,
jQuery.each(obj,fn,arg)
This method has three parameters: the object obj to be operated on, the function fn to be operated on, and the function parameters args.
Let us discuss based on the ojb 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 certain sub-element is Until false, that is to say, we can process it with the provided fn function and exit the each method call after it meets 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
The biggest difference between this method and 1 is: 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.

Copy code The code is as follows:

jQuery.each=function( obj, fn, args ) {
if ( args ) {
if ( obj.length == undefined ){
for ( var i in obj )
fn.apply( obj, args );
}else{
for ( var i = 0, ol = obj.length; i < ol; i ) {
if ( fn.apply( obj, args ) === false )
break;
}
}
} else {
if ( obj.length == undefined ) {
for ( var i in obj )
fn.call( obj, i, obj );
}else{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj [ i] ){}
}
}
return obj;
}

It should be noted that the specific calling method of fn in each method is not simple. fn(i,val) or fn(args), but takes the form of fn.call(val,i,val) or fn.apply(obj.args), which means that in your own implementation of fn , you can directly use this pointer to reference the sub-elements of an array or object. This method is an implementation method used by most jQuery.

Let’s illustrate it through an example

Look at the code first:

Copy the code The code is as follows :

$("#submit").click(function(){
try{
$('#leftTbl tr').each(function(i){
var emailInput = $("#email_" (1 i));
if(!re.test(emailInput.val())){
alert("Please fill in the email correctly");
emailInput.focus();
throw emailInput;
}else{
email = emailInput.val();
}
});
}catch(e){
return false;
}
$("#pageform").submit();
});

Through throw and then catch, you can also make a counter Finally, judge its value!

The above code seems to have nothing to do with the title, so how to implement break and continue in each actually has something to do with it below...

Copy code The code is as follows:

$('input').each(function(){
if($(this).val () == ''){
// do something
if(1==1)return false; // Use return false to break out of the loop
else return true; // Use return true. To enter the next loop
}
});

In jquery, you should check the returned value after iterating each element to determine whether to continue iterating the next element
Original article, please indicate when reprinting: Tongluba www.tlbar.com.cn

Copy code The code is as follows:

var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
//The output results of each above are: one, two, three, four
var arr1 = [[1, 4, 3], [4, 6, 6], [7 , 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//In fact, arr1 is a two-dimensional Array, item is equivalent to taking each one-dimensional array,
//item[0] is equivalent to taking the first value in each one-dimensional array
//So the output of each above is: 1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key] );
});
//This each is even more powerful, it can cycle through every attribute
//The output result is: 1 2 3 4