Suggested Videos
Part 23 - jQuery append elements
Part 24 - jQuery insert element before and after
Part 25 - jquery add or remove class
In jQuery there are 2 versions of each() method
1. .each()
2. $.each() or jQuery.each()
Please note : $ is shortcut for jQuery.
What is the difference
.each is used to iterate over the items in a jQuery collection
Example : In this example, the jQuery selector $('li') returns a jQuery object collection. So to loop thru the objects in the jQuery collection we are using .each() method. Notice this method is called on the jQuery object collection, that the selector returns, so the .each() method knows the items it has to iterate over.
The callback method has 2 parameters
1) index - The index of the element
2) element - The DOM element that we are currently iterating over
Since the element is a raw DOM object, to use use jQuery methods you have to wrap it using the jQuery wrapper $ as shown below.
$(element)
Instead of using element parameter, you can also use this keyword, which also refers to the raw DOM element that we are currently iterating over. To use jQuery methods you have to wrap it using the jQuery wrapper $ as shown below.
$(this)
Output :
$.each() or jQuery.each() is used for iterating over javascript objects and arrays.
Example : In the example below intArray is a JavaScript array. So to loop thru the elements in the array we are using $.each() function. Notice this function has 2 parameters
1) The JavaScript object or array that we want to iterate over
2) The callback function that will execute on each iteration
If you want to use .each() instead of $.each() function on the intArray object, wrap it using the jQuery wrapper $ as shown below.
Output :
Using $.each() to iterate over a JavaScript object : In this example, jsObject is a JavaScript object. In this example, $.each() is used to iterate over the JavaScript object properties.
Output :
In summary, .each() method is used to iterate over the items in a jQuery collection where as $.each() method is used to iterate over javascript objects or arrays.
Part 23 - jQuery append elements
Part 24 - jQuery insert element before and after
Part 25 - jquery add or remove class
In jQuery there are 2 versions of each() method
1. .each()
2. $.each() or jQuery.each()
Please note : $ is shortcut for jQuery.
What is the difference
.each is used to iterate over the items in a jQuery collection
Example : In this example, the jQuery selector $('li') returns a jQuery object collection. So to loop thru the objects in the jQuery collection we are using .each() method. Notice this method is called on the jQuery object collection, that the selector returns, so the .each() method knows the items it has to iterate over.
The callback method has 2 parameters
1) index - The index of the element
2) element - The DOM element that we are currently iterating over
Since the element is a raw DOM object, to use use jQuery methods you have to wrap it using the jQuery wrapper $ as shown below.
$(element)
Instead of using element parameter, you can also use this keyword, which also refers to the raw DOM element that we are currently iterating over. To use jQuery methods you have to wrap it using the jQuery wrapper $ as shown below.
$(this)
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var result = '';
$('li').each(function (index, element) {
result += 'Index = ' + index + ', Value = ' +
$(element).text() + '<br/>';
//or
//result
+= 'Index = ' + index + ', Value = ' + $(this).text() + '<br/>';
});
$('#resultDiv').html(result);
});
</script>
</head>
<body style="font-family:Arial">
<ul>
<li>US</li>
<li>India</li>
<li>UK</li>
<li>Canada</li>
<li>Australia</li>
</ul>
<div id="resultDiv"></div>
</body>
</html>
Output :
$.each() or jQuery.each() is used for iterating over javascript objects and arrays.
Example : In the example below intArray is a JavaScript array. So to loop thru the elements in the array we are using $.each() function. Notice this function has 2 parameters
1) The JavaScript object or array that we want to iterate over
2) The callback function that will execute on each iteration
If you want to use .each() instead of $.each() function on the intArray object, wrap it using the jQuery wrapper $ as shown below.
$(intArray).each(function (index, element) {
result += 'Index
= ' + index + ',
Value = ' + element + '<br />';
})
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var intArray = [100, 200, 300, 400, 500];
var result = '';
$.each(intArray, function (index, element) {
result += 'Index = ' + index + ', Value = ' +
element + '<br/>';
});
$('#resultDiv').html(result);
});
</script>
</head>
<body style="font-family:Arial">
<div id="resultDiv"></div>
</body>
</html>
Output :
Using $.each() to iterate over a JavaScript object : In this example, jsObject is a JavaScript object. In this example, $.each() is used to iterate over the JavaScript object properties.
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var jsObject = {
'USA': 'Washington D.C.',
'India': 'New Delhi',
'UK': 'London',
'Australia': 'Canberra'
};
var result = '';
$.each(jsObject, function (key, value) {
result += key + ' - ' + value + '<br/>';
});
$('#resultDiv').html(result);
});
</script>
</head>
<body style="font-family:Arial">
<div id="resultDiv"></div>
</body>
</html>
Output :
In summary, .each() method is used to iterate over the items in a jQuery collection where as $.each() method is used to iterate over javascript objects or arrays.
thanks for ur great work
ReplyDelete