jQuery .map() sets elements through functions
Syntax and Description
.map(callback)
passes each element in the current matched set through a function, produces a new jQuery object containing the return values.
callback is a function object that will
be invoked for each element in the current set
Return value is the new jQuery object.
Map each list item
The following code uses the map method to loop through
list items and convert its value to uppercase. Finally output the value
to another list
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w ww. j av a2s .c om-->
var mappedItems = $("li").map(function (index) {
var data = $("<li>").text($(this).text()).get(0);
$(data).text($(data).text().toUpperCase());
return data;
});
$("#results").append(mappedItems);
});
</script>
</head>
<body>
<body>
<ul>
<li>ja va2s.com</li>
<li>java 2s.com</li>
<li>java2 s.com</li>
</ul>
<ul id="results">
</ul>
</body>
</html>
Join the tag name with map function
The following code uses map function to get the tag name.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww . jav a 2 s . c om-->
var list = $("div,p").map(function () {
return this.tagName;
}).get().join(", ");
$("b").append(document.createTextNode(list));
});
</script>
</head>
<body>
<span>span</span>
<p>p</p>
<div>div</div>
<b>bold</b>
</body>
</html>
Map parents
We can use map function to map each parents.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . j av a 2 s . c o m-->
var parentEls = $("span").parents()
.map(function () {
return this.tagName;
})
.get().join(", ");
$("span").append(parentEls);
});
</script>
</head>
<body>
<body>
<div>
<p>
<span>
</span>
</p>
</div>
</body>
</html>
Use map function to get value from input element
We can also use map function to get value from input element.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w ww .ja v a 2 s . c o m-->
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
});
</script>
</head>
<body>
<body>
<p></p>
<form>
<input type="text" name="name" value="A"/>
<input type="text" name="name" value="B"/>
</form>
</body>
</html>
Map value with index and value
map function can not only work on HTML elements it can also deal with the array element. The following code maps value with index and value
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww . j a va2s. co m-->
var arr = [ "a", "b", "c", "d", "e" ]
arr = jQuery.map(arr, function(n, i){
return (n.toUpperCase() + i);
});
alert(arr);
});
</script>
</head>
<body>
<body>
<p></p><p></p><p></p>
</body>
</html>