.each()
Categories: Collection Manipulation | Traversing
.each( function(index, Element) )Returns: jQuery
Description: Iterate over a jQuery object, executing a function for each matched element.
-
.each( function(index, Element) )
version added: 1.0function(index, Element) A function to execute for each matched element.
The .each()
method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this
refers to the element.
Suppose we had a simple unordered list on the page:
<ul> <li>foo</li> <li>bar</li> </ul>
We can select the list items and iterate across them:
$('li').each(function(index) { alert(index + ': ' + $(this).text()); });
A message is thus alerted for each item in the list:
0: foo
1: bar
We can stop the loop from within the callback function by returning false
.
-
Iterates over three divs and sets their color property.
HTML:
<div>Click here</div> <div>to iterate through</div> <div>these divs.</div>
CSS:
div { color:red; text-align:center; cursor:pointer; font-weight:bolder; width:300px; }
Code:
$(document.body).click(function () { $("div").each(function (i) { if (this.style.color != "blue") { this.style.color = "blue"; } else { this.style.color = ""; } }); });
-
If you want to have the jQuery object instead of the regular DOM element, use the $(this) function, for example:
HTML:
To do list: <span>(click here to change)</span> <ul> <li>Eat</li> <li>Sleep</li> <li>Be merry</li> </ul>
CSS:
ul { font-size:18px; margin:0; } span { color:blue; text-decoration:underline; cursor:pointer; } .example { font-style:italic; }
Code:
$("span").click(function () { $("li").each(function(){ $(this).toggleClass("example"); }); });
-
You can use 'return' to break out of each() loops early.
HTML:
<button>Change colors</button> <span></span> <div></div> <div></div> <div></div> <div></div> <div id="stop">Stop here</div> <div></div> <div></div> <div></div>
CSS:
div { width:40px; height:40px; margin:5px; float:left; border:2px blue solid; text-align:center; } span { color:red; }
Code:
$("button").click(function () { $("div").each(function (index, domEle) { // domEle == this $(domEle).css("backgroundColor", "yellow"); if ($(this).is("#stop")) { $("span").text("Stopped at div index #" + index); return false; } }); });
.each( [ overwrite ], callback(indexInArray, valueOfElement) )Returns: jQuery
Plugin: jQuery.each
Description: Iterate over a jQuery object, executing a function for each matched element.
-
.each( [ overwrite ], callback(indexInArray, valueOfElement) )
version added: 1.0overwrite A boolean indication whether to overwrite every object by the return element.
callback(index, element) A function to execute for each matched element.
The .each()
method is designed to make DOM looping constructs concise and less error-prone. When called it
iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is
passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context
of the current DOM element, so the keyword this
refers to the element.
We can break the .each()
loop at a particular iteration by making the callback function return false.
Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next
iteration.
If we set the overwrite argument, returning non-false and non-undefined will set a new value to current item. The overwrite argument is very usefull if we want to replace an element, so we can work in chain on the new elements.
-
Replace all password inputs with empty text inputs and toogle each element of matched elements.
Code:
$(':input') .each( true, function(){ if( elem.attr('type') === 'password' ){ var elem = $(this), repl = elem .clone() .attr({ 'type': 'text', 'value': '' }) .insertBefore( elem ); elem.remove(); return repl; } }) .toggle();