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

   <source lang="javascript">

<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 = $("

").text($(this).text()).get(0); $(data).text($(data).text().toUpperCase()); return data; }); $("#results").append(mappedItems); }); </script> </head> <body> <body>

asdf
asdf
asdf

 </body>

</html></source>

Add node to tag

   <source lang="javascript">

<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="javascript">

<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="javascript">

<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 = $("

").text($(this).text()).get(0); if (index == 0) { $(replacement).text($(replacement).text().toUpperCase()); } return replacement; }); $("#results").append(mappedItems); }); </script> </head> <body> <body>

Abc
Bcd
Cde

   </body>

</html></source>

Map and isNaN

   <source lang="javascript">

<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="javascript">

<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="javascript">

<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="javascript">

<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="javascript">

<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("

" + this + "

\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>

A
B
C
D
E

 </body>

</html></source>

Map to join strings

   <source lang="javascript">

<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="javascript">

<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="javascript">

<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="javascript">

<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="javascript">

<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("

" + this + "

\n");

     }
   );
 }

);

   </script>
 </head>
 <body>

 </body>

</html></source>

Traversing-Map

   <source lang="javascript">

<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="javascript">

<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="javascript">

<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("

" + this + "

\n");

     }
   );
 }

);

   </script>
 </head>
 <body>

 </body>

</html></source>

JavaScript Tutorial/jQuery/map

Содержание

Add LI to UL

Add node to tag

Find all parent elements of each paragraph.

Map and index

Map and isNaN

Map and split

map(callback) builds lists of values, attributes, css values

Map each parents

map function and switch

Map to join strings

Map value function

Map value only

Map value with index and value

Nested map and each function

Traversing-Map

Use map to join the selected tag names

Use variable defined outside in map function

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты