How to use $.each in JQuery and the difference with $(selector).each()-JS Tutorial-php.cn

How to use $.each in JQuery and the difference with $(selector).each()

伊谢尔伦

Release： 2017-06-17 14:37:47

Original

942 people have browsed it

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 array, multi-dimensional array, DOM, JSON, etc. During the javaScript development process Using $each can greatly reduce our workload.

each() method example:

var arr = [ "aaa", "bbb", "ccc" ];
$.each(arr, function(i,a){
alert(i); // i 是循环的序数
alert(a); // a 是值
});
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});

Copy after login

In fact, arr1 is a two-dimensional array, item is equivalent to taking each one-dimensional array,
item[0] Relative to taking the first value in each one-dimensional array
So the output of each above is: 1 4 7

A general traversal function that can be used to traverse objectsAnd arrays. Arrays and pseudo-array objects containing a length attribute (pseudo-array objects such as the arguments object of a function) are traversed with a numerical index, from 0 to length-1, and other objects are traversed through the attributes.

$.each() is different from $(selector).each(). The latter is specially used for traversing jquery objects. The former can be used to traverse any collection (whether it is an array or an object). If it is an array, Callback The function passes in the index of the array and the corresponding value each time (the value can also be obtained through the this keyword, but javascript always wraps this value as an object - even if it is a string or a number), the method will return the first parameter of the traversed object.

Example:————Pass in an array

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
$.each([52, 97], function(index, value) {
alert(index + ‘: ‘ + value);
});
 
</script>
</body>
</html>

Copy after login

//输出
 
0: 52
1: 97

Copy after login

Example:————If a map is used as a collection, the callback function passes in one key at a time -Value pair

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
var map = {
‘flammable&#39;: ‘inflammable&#39;,
‘duh&#39;: ‘no duh&#39;
};
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
});
 
</script>
</body>
</html>

Copy after login

//输出
 
flammable: inflammable
duh: no duh

Copy after login

Example:——You can exit $.each() when returning false in the callback function. If a non-false is returned, it will be like in the for loop# The same as using continue in ##, it will immediately enter the next traversal

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; }
  p#five { color:red; }
  </style>
  <script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
 
<body>
  <p id=”one”></p>
  <p id=”two”></p>
  <p id=”three”></p>
  <p id=”four”></p>
  <p id=”five”></p>
<script>
    var arr = [ "one", "two", "three", "four", "five" ];//数组
    var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象
    jQuery.each(arr, function() {  // this 指定值
      $(“#” + this).text(“Mine is ” + this + “.”);  // this指向为数组的值, 如one, two
       return (this != “three”); // 如果this = three 则退出遍历
   });
    jQuery.each(obj, function(i, val) {  // i 指向键, val指定值
      $(“#” + i).append(document.createTextNode(” – ” + val));
    });
</script>
</body>
</html>

Copy after login

// 输出
 
Mine is one. – 1
Mine is two. – 2
Mine is three. – 3
- 4
- 5

Copy after login

Example:————Traverse the items of the array, passing in index and value

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;], function(i, l){
alert( “Index #” + i + “: ” + l );
});
 
</script>
</body>
</html>

Copy after login

Example:——Traverse the properties of the object and pass in the key and value

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
$.each( { name: “John”, lang: “JS” }, function(k, v){
alert( “Key: ” + k + “, Value: ” + v );
});
 
</script>
</body>
</html>

Copy after login

Example from the comment

1. If you don’t want to output the first item (use retrun true) and enter the next iteration

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == 0) {
return true; // equivalent to ‘continue&#39; with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});
 
</script>
</body>
</html>

Copy after login

The above is the detailed content of How to use $.each in JQuery and the difference with $(selector).each(). For more information, please follow other related articles on the PHP Chinese website!