2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
2010-11-02 01:46:29 +00:00
< html lang = 'en' > < head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1" > < meta http-equiv = 'content-type' content = 'text/html; charset=UTF-8' / > < / head > < body >
2010-09-18 16:20:35 +00:00
< div data-role = "page" >
2010-09-21 14:58:54 +00:00
< div data-role = "header" >
2010-09-16 17:13:38 +00:00
< h1 > .map()< / h1 >
< / div >
2010-10-12 19:50:28 +00:00
< div data-role = "content" data-theme = "c" id = "map1" >
2010-09-16 17:13:38 +00:00
< 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 >
