Home >Web Front-end >JS Tutorial >How to use $.each in JQuery and the difference with $(selector).each()

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

伊谢尔伦Original: 2017-06-17 14:37:471026browse

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

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>

//输出
 
0: 52
1: 97

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>

//输出
 
flammable: inflammable
duh: no duh

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>

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

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>

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A complete collection of jquery operation select instancesNext article：A complete collection of jquery operation select instances

See more

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

Related articles