Home > Developer > JavaScript
Example of using the each () method in jQuery, jqueryeach
This document describes the usage of the each () method in jQuery. Share it with you for your reference. The specific analysis is as follows:
This method can execute a function by matching each element in the element set as the context.
Each time a function is executed, the execution environment of the function is a DOM element that matches the Element Set and passes the element index to the function, the index value starts from 0. If the return value is false, it can be used to stop the loop operation early. If the return value is true, the function will continue to be executed until every element in the matching element is traversed.
The each () method is different from the jQuery. each () method. The each () method can only traverse JQuery objects, while the jQuery. each () method can traverse any objects.
Syntax structure:
Copy codeThe Code is as follows: $ (selector). each (function (index, element ))
Parameter List:
| Parameters | Description |
| Function (index, element) | Each matching element defines the running method. Index-optional. The index of the current context element in the Matching Element Set. Element-optional. The current element (you can also use the "this" selector ). |
Instance code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> each () function-helper's house </title>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Btn"). click (function (){
$ ("Li"). each (function (index, element ){
Alert ($ (element). text ())
})
})
})
</Script>
</Head>
<Body>
<Ul>
<Li> background area </li>
<Li> foreground area </li>
<Li> database zone </li>
<Li> webmaster area </li>
</Ul>
<Button id = "btn"> click to view results </button>
</Body>
</Html>
The code above facilitates each element in the li element set and then returns the text in the li element.
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
