Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 121 lines (115 sloc) 4.147 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
<?xml version="1.0"?>
<entry type="method" name="each" return="jQuery">
  <title>.each()</title>
  <signature>
    <added>1.0</added>
    <argument name="function(index, Element)" type="Function">
      <desc>A function to execute for each matched element.</desc>
    </argument>
  </signature>
  <desc>Iterate over a jQuery object, executing a function for each matched element. </desc>
  <longdesc>
    <p>The <code>.each()</code> 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 <code>this</code> refers to the element.</p>
    <p>Suppose you have a simple unordered list on the page:</p>
    <pre><code>&lt;ul&gt;
    &lt;li&gt;foo&lt;/li&gt;
    &lt;li&gt;bar&lt;/li&gt;
&lt;/ul&gt;
    </code></pre>
    <p>You can select the list items and iterate across them:</p>
<pre><code>$( "li" ).each(function( index ) {
  console.log( index + ": "" + $(this).text() );
});
  </code></pre>
    <p>A message is thus logged for each item in the list:</p>
    <p>
      <span class="output">0: foo</span>
      <br/>
      <span class="output">1: bar</span>
    </p>
    <p>You can stop the loop from within the callback function by returning <code>false</code>.</p>
    <p>Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as <i>implicit iteration</i>. When this occurs, it is often unnecessary to <i>explicitly</i> iterate with the <code>.each()</code> method:</p>
<pre><code>// The .each() method is unnecessary here:
$( "li" ).each(function() {
  $(this).addClass( "foo" );
});

// Instead, you should rely on implicit iteration:
$( "li" ).addClass( "bar" );
</code></pre>
  </longdesc>
  <example>
    <desc>Iterate over three divs and sets their color property.</desc>
    <code><![CDATA[
$(document.body).click(function () {
$( "div" ).each(function (i) {
if ( this.style.color != "blue" ) {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
]]></code>
    <css><![CDATA[
div { color:red; text-align:center; cursor:pointer;
font-weight:bolder; width:300px; }
]]></css>
    <html><![CDATA[<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>]]></html>
  </example>
  <example>
    <desc>To access a jQuery object instead of the regular DOM element, use <code>$(this)</code>. For example:</desc>
    <code><![CDATA[
$( "span" ).click(function () {
$( "li" ).each(function(){
$( this ).toggleClass( "example" );
});
});

]]></code>
    <css><![CDATA[
ul { font-size:18px; margin:0; }
span { color:blue; text-decoration:underline; cursor:pointer; }
.example { font-style:italic; }
]]></css>
    <html><![CDATA[To do list: <span>(click here to change)</span>
<ul>
<li>Eat</li>
<li>Sleep</li>

<li>Be merry</li>
</ul>]]></html>
  </example>
  <example>
    <desc>Use "return" to break out of each() loops early.</desc>
    <code><![CDATA[
$( "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;
}
});
});

]]></code>
    <css><![CDATA[
div { width:40px; height:40px; margin:5px; float:left;
border:2px blue solid; text-align:center; }
span { color:red; }
]]></css>
    <html><![CDATA[<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>]]></html>
  </example>
  <category slug="miscellaneous/collection-manipulation"/>
  <category slug="traversing"/>
  <category slug="version/1.0"/>
</entry>
Something went wrong with that request. Please try again.