[Learning jQuery from 0 to 1] using each () and $. each () in jQuery, jquery. each

[Learning jQuery from 0 to 1] using each () and $. each () in jQuery, jquery. each
Introduction:

Recently, I encountered a problem: how to simulate the break and continue operations in the for loop in the each () function. So I checked jQuery's document on this function and summarized it.

The Demo code is as follows:

<Div> <ul> <li> You Have 1st </li> <li> you have 2nd </li> <li> you have 3rd </li> li> You Are 4th </li> <li> You Are 5th </li> </ul> </div>

The result is to traverse the entire li Tag Element. When the loop reaches "you are 2nd", continue executes the break when "you are 4th" tags;

1. $ (selector). Use of the each () function Function Definition:

. Each (function (index, Element ))

Function (index, Element)
Type:Function ()
A function executed for each matching element.

$ (Function () {$ ('lil '). each (function (index) {var innerText = $ (this ). text (); if (innerText = 'You are 2nd') {// skip this loop, which is equivalent to continue return ;} else if (innerText = 'You are 4th') {// exit the loop, equivalent to break; return false;} console. log (innerText );});})

Execution result:

In the function body, we use$ (This)Obtain the jQuery object that is currently traversed to the element. We can also useThisObtain common js objects.

Let's take a look at the break point at the function's entrance and observe the output of $ (this) and this:

2. $. Use of the each () function

$. Each () is a common iteration function that can be used to seamlessly iterate objects and arrays. An array and an object similar to an array use a length attribute (such as a parameter object of a function) to iterate the numeric index, from 0 to length-1. Other objects are iterated through their attribute names.

Function Definition:

JQuery. each (array, callback) or jQuery. each (object, callback)
Array
Type: Array
The array to be traversed.
Object
Type: Object
The object to be traversed.
Callback
Type: Function (Integer indexInArray, Object value)
This function is called on each object (iterative.

Run the Code:

$ (Function () {$. each ($ ('lil'), function (index, elem) {// console. log (index); // console. log (elem); var innerText = elem. innerText; if (innerText = 'You are 3rd') {return;} else if (innerText = 'You are 5th') {return false;} console. log (innerText );})})

Result:

In-depth research:
Callback function from the above CodeFunction (index, elem)We know that when the traversal is an arrayIndexAndElemThey are the index and the index value.

So when we traverse an object?

Example:

var testObject={        name:'zhiqiang',        age:'23',        home:'haidian'    }    $(function(){        $.each(testObject,function(keyObj,valueObj){            console.log(keyObj,valueObj);        })    })

The output result is:

Here we can know that when the $. each () function traverses an objectArgument [0],Argument [1]They are objectKeyAndValue.