Hello Readers!
Here I am going to explaining you about the $.each() method used in jquery.
The jquery function $.each() is a traversing method which loops through both arrays and objects. The length property of the arrays as an index is used for iteration that is starting from 0 to length 1. This is also used for the automatically loop over all members of an object.
Syntax:
Syntax:$(selector).each(callback)
Source Code:-
<!DOCTYPE html>
<html>
<head>
<title>Jquery Utility : Looping over objects using $.each() </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function(){
var myObjects = {USA:1, China:2, India:3, Japan:4, Pakistan:5};
$.each(myObjects, function(index, elements){ // $.each for looping over list items
$("#"+index).append(document.createTextNode(
"Country - " + index + " : Economy Rank " + elements));
console.log(index);
});
});
});
</script>
<style>
body{font-family:Verdana; color:#444;}
div{border:5px solid #fa4b2a;padding:10px;}
</style>
</head>
<body>
<h3>Looping Over Objects using $.each()</h3>
<div id="USA">First:row - </div><br>
<div id="China">Second:row - </div><br>
<div id="India">Third:row - </div><br>
<div id="Japan">Fourth:row - </div><br>
<div id="Pakistan">Fifth row - </div><br>
<button>Click Here</button>
</body>
</html>
Output:
For getting result user may download the file from the below link.
0 Comment(s)