A brief discussion on the each method in Jquery-JS Tutorial-php.cn

A brief discussion on the each method in Jquery

青灯夜游

Release： 2021-01-02 17:55:42

forward

3197 people have browsed it

This article will introduce to you the each method in Jquery. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

A brief discussion on the each method in Jquery

Recommended tutorial: jQuery tutorial

##jQuery.each(object, callback,arg)<strong></strong>

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 calls the method one by one on all sub-elements of the object provided by parameter 1. The each method provided by the jQuery object calls the sub-elements inside jQuery one by one.

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

Copy after login

Let us take a look at the specific implementation of the each method provided by jQuery.

jQuery.each(obj,fn,arg)

Copy after login

This method has three parameters: the object obj for operation, the function fn for operation, 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 a certain Until the result returned by the child element is 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. The obj 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.

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;
}

Copy after login

It should be noted that the specific calling method of fn in each method is not simple fn(i,val) or fn(args), but 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 refer to the sub-elements of the array or object. This method is an implementation method used by most jQuery.

var arr = ["one", "two", "three", "four", "five"];
var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };
 
    jQuery.each(arr, function() {
        alert(this);
    });
    /*
    one,two,three,four,five
    */
   
    jQuery.each(obj, function(i, val) {
        alert(i+":"+val);
    });
    /*
    one:1 two:2 three:3 four:4  five:5
    */
   
    jQuery.each(arr, function(i, val) {
        alert(i);
    });
    /*
    0,1,2,3,4
    */
   
    jQuery.each(arr, function(i, val) {
        alert(arr[i]);
    });
    /*
    one tow three four five
    */

Copy after login

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of A brief discussion on the each method in Jquery. For more information, please follow other related articles on the PHP Chinese website!