mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 15:00:23 +00:00
b11a45f615
Inset listviews have no margin now, and regular listviews have -15px margins. Also, collapsibles now have no padding. Updated HTML to remove ui-body classes for content divs, to match these changes. Fixes #161
154 lines
No EOL
5.1 KiB
HTML
154 lines
No EOL
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
|
<div data-role="page">
|
|
<div data-role="header">
|
|
<h1>.each()</h1>
|
|
|
|
</div>
|
|
<div data-role="content" data-theme="c" id="each1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.each( function(index, Element) )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
|
</h2>
|
|
<div class=" entry-details">
|
|
<p class="desc"><strong>Description: </strong>Iterate over a jQuery object, executing a function for each matched element. </p>
|
|
<ul class="signatures"><li class="signature" id="each-functionindex, Element">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>.each( function(index, Element) )</h4>
|
|
<p class="arguement"><strong>function(index, Element)</strong>A function to execute for each matched element.</p>
|
|
</li></ul>
|
|
<div class="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 we had a simple unordered list on the page:</p>
|
|
<pre><ul>
|
|
<li>foo</li>
|
|
<li>bar</li>
|
|
</ul>
|
|
</pre>
|
|
<p>We can select the list items and iterate across them:</p>
|
|
<pre>$('li').each(function(index) {
|
|
alert(index + ': ' + $(this).text());
|
|
});
|
|
</pre>
|
|
<p>A message is thus alerted for each item in the list:</p>
|
|
<p><span class="output">0: foo</span><br><span class="output">1: bar</span></p>
|
|
<p>We can stop the loop from within the callback function by returning <code>false</code>.</p>
|
|
</div>
|
|
<h3>Examples:</h3>
|
|
<div id="entry-examples" class="entry-examples">
|
|
<div id="example-0">
|
|
<h4>Example: <span class="desc">Iterates over three divs and sets their color property.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div { color:red; text-align:center; cursor:pointer;
|
|
font-weight:bolder; width:300px; }
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<div>Click here</div>
|
|
|
|
<div>to iterate through</div>
|
|
<div>these divs.</div>
|
|
<script>
|
|
$(document.body).click(function () {
|
|
$("div").each(function (i) {
|
|
if (this.style.color != "blue") {
|
|
this.style.color = "blue";
|
|
} else {
|
|
this.style.color = "";
|
|
}
|
|
});
|
|
});</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
<div id="example-1">
|
|
<h4>Example: <span class="desc">If you want to have the jQuery object instead of the regular DOM element, use the $(this) function, for example:</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
ul { font-size:18px; margin:0; }
|
|
span { color:blue; text-decoration:underline; cursor:pointer; }
|
|
.example { font-style:italic; }
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
To do list: <span>(click here to change)</span>
|
|
<ul>
|
|
<li>Eat</li>
|
|
<li>Sleep</li>
|
|
|
|
<li>Be merry</li>
|
|
</ul>
|
|
<script>
|
|
$("span").click(function () {
|
|
$("li").each(function(){
|
|
$(this).toggleClass("example");
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
<div id="example-2">
|
|
<h4>Example: <span class="desc">You can use 'return' to break out of each() loops early.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div { width:40px; height:40px; margin:5px; float:left;
|
|
border:2px blue solid; text-align:center; }
|
|
span { color:red; }
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
<script>
|
|
$("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;
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html> |