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>

Related examples in the same category

1.	Add LI to UL
2.	Add node to tag
3.	Map each parents
4.	Map to join strings
5.	Map value function
6.	Map value only
7.	Map value with index and value
8.	Traversing-Map
9.	Map and split
10.	Map and isNaN
11.	map(callback) builds lists of values, attributes, css values
12.	Map and index
13.	Find all parent elements of each paragraph.
14.	Use map to join the selected tag names
15.	Nested map and each function
16.	Use variable defined outside in map function

map function and switch : map « jQuery « JavaScript DHTML

Related examples in the same category