JavaScript DHTML/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
<source lang="html4strict">
<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 = $("
- asdf
- asdf
- asdf
</body>
</html>
</source>
Add node to tag
<source lang="html4strict">
<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
p
div
bold </body>
</html>
</source>
Find all parent elements of each paragraph.
<source lang="html4strict">
<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("" + parentEls + ""); }); </script> </head> <body> <body>
Hello
Hello Again
</body>
</html>
</source>
Map and index
<source lang="html4strict">
<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 = $("
- Abc
- Bcd
- Cde
</body>
</html>
</source>
Map and isNaN
<source lang="html4strict">
<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>
Follow me!
</body>
</html>
</source>
Map and split
<source lang="html4strict">
<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>
Follow me!
</body>
</html>
</source>
map(callback) builds lists of values, attributes, css values
<source lang="html4strict">
<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>
<form> <input type="text" name="name" value="A"/> <input type="text" name="password" value="B"/> </form> </body>
</html>
</source>
Map each parents
<source lang="html4strict">
<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>
</body>
</html>
</source>
map function and switch
<source lang="html4strict">
<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() + " C"; } case ($(this).hasClass("my3")): { return $(this).text() + " B"; } case ($(this).hasClass("my")): { return $(this).text() + " my Harrison"; } } } ); $("ul#ulId").hide(); $($mapped).each( function() {$("ul#tmpMapped").append("
} ); }
);
</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>
- A
- B
- C
- D
- E
</body>
</html>
</source>
Map to join strings
<source lang="html4strict">
<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
p
div
bold </body>
</html>
</source>
Map value function
<source lang="html4strict">
<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>
<form> <input type="text" name="name" value="A"/> <input type="text" name="name" value="B"/> </form> </body>
</html>
</source>
Map value only
<source lang="html4strict">
<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>
</body>
</html>
</source>
Map value with index and value
<source lang="html4strict">
<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>
</body>
</html>
</source>
Nested map and each function
<source lang="html4strict">
<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("
} ); }
);
</script> </head> <body>
</body>
</html>
</source>
Traversing-Map
<source lang="html4strict">
<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>
<form> <input type="text" name="name" value="A"/> <input type="text" name="name" value="B"/> </form> </body>
</html>
</source>
Use map to join the selected tag names
<source lang="html4strict">
<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
p
div
span
</body>
</html>
</source>
Use variable defined outside in map function
<source lang="html4strict">
<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("
} ); }
);
</script> </head> <body>
</body>
</html>
</source>