JavaScript Tutorial/jQuery/map
Содержание
- 1 Add LI to UL
- 2 Add node to tag
- 3 Find all parent elements of each paragraph.
- 4 Map and index
- 5 Map and isNaN
- 6 Map and split
- 7 map(callback) builds lists of values, attributes, css values
- 8 Map each parents
- 9 map function and switch
- 10 Map to join strings
- 11 Map value function
- 12 Map value only
- 13 Map value with index and value
- 14 Nested map and each function
- 15 Traversing-Map
- 16 Use map to join the selected tag names
- 17 Use variable defined outside in map function
Add LI to UL
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
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>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<ul id="results">
</ul>
</body>
</html>
Add node to tag
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
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>
Find all parent elements of each paragraph.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var parentEls = $("p").parents()
.map(function () {
return this.tagName;
})
.get().join(", ");
$("p").append("<strong>" + parentEls + "</strong>");
});
</script>
</head>
<body>
<body>
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
</body>
</html>
Map and index
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var mappedItems = $("li").map(function (index) {
var replacement = $("<li>").text($(this).text()).get(0);
if (index == 0) {
$(replacement).text($(replacement).text().toUpperCase());
}
return replacement;
});
$("#results").append(mappedItems);
});
</script>
</head>
<body>
<body>
<ul>
<li>Abc</li>
<li>Bcd</li>
<li>Cde</li>
</ul>
<ul id="results">
</ul>
</body>
</html>
Map and isNaN
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var strings = ["1","2","3","4","S","6"];
var values = $.map(strings,function(value){
var result = new Number(value);
return isNaN(result) ? null : result;
});
alert(values);
var values = ["this","that","other thing"];
$.map(values,function(value){
return value.split("");
})
alert(values);
});
</script>
</head>
<body>
<body>
<p id="followMe">Follow me!</p>
</body>
</html>
Map and split
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var strings = ["1","2","3","4","S","6"];
var values = $.map(strings,function(value){
var result = new Number(value);
return isNaN(result) ? null : result;
});
alert(values);
var values = ["this","that","other thing"];
$.map(values,function(value){
return value.split("");
})
alert(values);
});
</script>
</head>
<body>
<body>
<p id="followMe">Follow me!</p>
</body>
</html>
map(callback) builds lists of values, attributes, css values
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("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="password" value="B"/>
</form>
</body>
</html>
Map each parents
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
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>
map function and switch
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var $mapped = $("li").map(
function($key) {
switch (true) {
case ($(this).hasClass("my2")): {
return $(this).text() + " <i>C</i>";
}
case ($(this).hasClass("my3")): {
return $(this).text() + " <i>B</i>";
}
case ($(this).hasClass("my")): {
return $(this).text() + " <i>my Harrison</i>";
}
}
}
);
$("ul#ulId").hide();
$($mapped).each(
function() {
$("ul#tmpMapped").append("<li>" + this + "</li>\n");
}
);
}
);
</script>
<style type="text/css">
ul {
list-style: none;
margin: 5px;
padding: 0;
}
ul li {
position: relative;
background: #eff557;
border: 1px solid black;
padding: 3px;
margin: 2px 0;
}
i {
position: absolute;
top: 3px;
right: 3px;
}
</style>
</head>
<body>
<ul id="ulId">
<li class="my3">A</li>
<li class="my2">B</li>
<li class="my3">C</li>
<li class="my2">D</li>
<li class="my">E</li>
</ul>
<ul id="tmpMapped">
</ul>
</body>
</html>
Map to join strings
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
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 value function
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("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 only
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var arr = [ "a", "b", "c", "d", "e" ]
arr = jQuery.map(arr, function(n){
return (n.toUpperCase());
});
alert(arr);
});
</script>
</head>
<body>
<body>
<p></p><p></p><p></p>
</body>
</html>
Map value with index and value
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
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>
Nested map and each function
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var $items = [
"A",
"B",
"C",
"D"
];
var $i = 0;
var $mapped = $($items).map(
function($key) {
$i++;
return ($i < 2 ? "0" + $i : $i) + " " + this;
}
);
$($mapped).each(
function() {
$("ul#ulId").append("<li>" + this + "</li>\n");
}
);
}
);
</script>
</head>
<body>
<ul id="ulId">
</ul>
</body>
</html>
Traversing-Map
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("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>
Use map to join the selected tag names
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var list = $("div,p,span").map(function () {
return this.tagName;
}).get().join(", ");
$("b").append(document.createTextNode(list));
});
</script>
</head>
<body>
<body>
<span>span</span>
<p>p</p>
<div>div</div>
<span>span</span>
</body>
</html>
Use variable defined outside in map function
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var $items = [
"A",
"B",
"C",
"D"
];
var $i = 0;
var $mapped = $($items).map(
function($key) {
$i++;
return ($i < 2 ? "0" + $i : $i) + " " + this;
}
);
$($mapped).each(
function() {
$("ul#ulId").append("<li>" + this + "</li>\n");
}
);
}
);
</script>
</head>
<body>
<ul id="ulId">
</ul>
</body>
</html>