mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 22:40:31 +00:00
178 lines
No EOL
5.8 KiB
HTML
178 lines
No EOL
5.8 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>.map()</h1>
|
|
|
|
</div>
|
|
<div data-role="content" class=" ui-body ui-body-c" id="map1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.map( callback(index, domElement) )</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>Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.</p>
|
|
<ul class="signatures"><li class="signature" id="map-callbackindex, domElement">
|
|
<h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.2/">1.2</a></span>.map( callback(index, domElement) )</h4>
|
|
<p class="arguement"><strong>callback(index, domElement)</strong>A function object that will be invoked for each element in the current set.</p>
|
|
</li></ul>
|
|
<div class="longdesc">
|
|
<p>The <code>.map()</code> method is particularly useful for getting or setting the value of a collection of elements. Consider a form with a set of checkboxes in it:</p>
|
|
<pre>
|
|
<form method="post" action="">
|
|
<fieldset>
|
|
<div>
|
|
<label for="two">2</label>
|
|
<input type="checkbox" value="2" id="two" name="number[]">
|
|
</div>
|
|
<div>
|
|
<label for="four">4</label>
|
|
<input type="checkbox" value="4" id="four" name="number[]">
|
|
</div>
|
|
<div>
|
|
<label for="six">6</label>
|
|
<input type="checkbox" value="6" id="six" name="number[]">
|
|
</div>
|
|
<div>
|
|
<label for="eight">8</label>
|
|
<input type="checkbox" value="8" id="eight" name="number[]">
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</pre>
|
|
<p>We can get a comma-separated list of checkbox <code>ID</code>s:</p>
|
|
<pre>$(':checkbox').map(function() {
|
|
return this.id;
|
|
}).get().join(',');</pre>
|
|
<p>The result of this call is the string, <code>"two,four,six,eight"</code>.</p>
|
|
<p>Within the callback function, <code>this</code> refers to the current DOM element for each iteration.</p>
|
|
</div>
|
|
<h3>Examples:</h3>
|
|
<div id="entry-examples" class="entry-examples">
|
|
<div id="example-0">
|
|
<h4>Example: <span class="desc">Build a list of all the values within a form.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
p { color:red; }
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<p><b>Values: </b></p>
|
|
<form>
|
|
<input type="text" name="name" value="John"/>
|
|
|
|
<input type="text" name="password" value="password"/>
|
|
<input type="text" name="url" value="http://ejohn.org/"/>
|
|
|
|
</form>
|
|
<script>
|
|
$("p").append( $("input").map(function(){
|
|
return $(this).val();
|
|
}).get().join(", ") );
|
|
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
<div id="example-1">
|
|
<h4>Example: <span class="desc">A contrived example to show some functionality.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body { font-size:16px; }
|
|
ul { float:left; margin:0 30px; color:blue; }
|
|
#results { color:red; }
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<ul>
|
|
<li>First</li>
|
|
<li>Second</li>
|
|
<li>Third</li>
|
|
|
|
<li>Fourth</li>
|
|
<li>Fifth</li>
|
|
</ul>
|
|
<ul id="results">
|
|
|
|
</ul>
|
|
<script>
|
|
var mappedItems = $("li").map(function (index) {
|
|
var replacement = $("<li>").text($(this).text()).get(0);
|
|
if (index == 0) {
|
|
// make the first item all caps
|
|
$(replacement).text($(replacement).text().toUpperCase());
|
|
} else if (index == 1 || index == 3) {
|
|
// delete the second and fourth items
|
|
replacement = null;
|
|
} else if (index == 2) {
|
|
// make two of the third item and add some text
|
|
replacement = [replacement,$("<li>").get(0)];
|
|
$(replacement[0]).append("<b> - A</b>");
|
|
$(replacement[1]).append("Extra <b> - B</b>");
|
|
}
|
|
|
|
// replacement will be an dom element, null,
|
|
// or an array of dom elements
|
|
return replacement;
|
|
});
|
|
$("#results").append(mappedItems);
|
|
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
<div id="example-2">
|
|
<h4>Example: <span class="desc">Equalize the heights of the divs.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div { width: 40px; float:left; }
|
|
input { clear:left}
|
|
</style>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<input type="button" value="equalize div heights">
|
|
|
|
<div style="background:red; height: 40px; "></div>
|
|
<div style="background:green; height: 70px;"></div>
|
|
<div style="background:blue; height: 50px; "></div>
|
|
|
|
|
|
<script>
|
|
$.fn.equalizeHeights = function(){
|
|
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
|
|
}
|
|
$('input').click(function(){
|
|
$('div').equalizeHeights();
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html> |