The difference between $.each and $of selector.each of in JQuery
- 2020-05-16 06:14:57
- OfStack
A generic traversal function that can be used to traverse objects and arrays. Arrays and pseudo-array objects with an length attribute (such as function's arguments object) are traversed numerically, from 0 to length-1, and other objects are traversed by the attributes.
$. each () and $(selector). each () is different, the latter is dedicated to jquery object traversal, the former can be used to traverse any collection (either an array or object), if it is an array, the callback function for each incoming array index and the corresponding value (value also can be obtained through this keyword, but javascript always packing this value as an object - albeit a string or a number), the method returns 1 parameters of the object being traversed.
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>
// The output
0: 52
1: 97
Example: -- if a map is used as a collection, the callback function passes in one key-value pair at a time
<!DOCTYPE html>
<html>
<head>
<script src= " http://code.jquery.com/jquery-latest.js " ></script>
</head>
<body>
<script>
var map = {
' flammable': ' inflammable',
' duh': ' no duh'
};
$.each(map, function(key, value) {
alert(key + ' : ' + value);
});
</script>
</body>
</html>
// The output
flammable: inflammable
duh: no duh
Example: -- the callback function return false can exit $.each (), if it returns a non-false, it will immediately enter the next traversal as if continue 1 had been used in the for loop
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
div#five { color:red; }
</style>
<script src= " http://code.jquery.com/jquery-latest.js " ></script>
</head>
<body>
<div id= " one " ></div>
<div id= " two " ></div>
<div id= " three " ></div>
<div id= " four " ></div>
<div id= " five " ></div>
<script>
var arr = [ "one", "two", "three", "four", "five" ];// An array of
var obj = { one:1, two:2, three:3, four:4, five:5 }; // object
jQuery.each(arr, function() { // this Specify a value
$( " # " + this).text( " Mine is " + this + " . " ); // this Points to the value of the array , Such as one, two
return (this != " three " ); // if this = three Exit traversal
});
jQuery.each(obj, function(i, val) { // i Point to the key , val Specify a value
$( " # " + i).append(document.createTextNode( " � " + val));
});
</script>
</body>
</html>
// The output
Mine is one. � 1
Mine is two. � 2
Mine is three. � 3
- 4
- 5
Example: -- iterate over the items in groups, passing index and value
<!DOCTYPE html>
<html>
<head>
<script src= " http://code.jquery.com/jquery-latest.js " ></script>
</head>
<body>
<script>
$.each( ['a','b','c'], function(i, l){
alert( " Index # " + i + " : " + l );
});
</script>
</body>
</html>
Example: -- traverses the properties of the object, passing 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>
Examples from the comments
1. If you don't want to output number one 1 item ( use retrun true) Enter the Under the 1 traverse
<!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' with a normal for loop
}
// else do stuff ...
alert (index + " : " + value);
});
</script>
</body>
</html>