Método jQuery - map (callback)

Descrição

o map( callback ) O método traduz um conjunto de elementos no objeto jQuery em outro conjunto de valores em um array jQuery que pode ou não conter elementos.

Você pode usar esse método para criar listas de valores, atributos, valores css - ou até mesmo realizar transformações de seletor especiais e personalizadas.

Sintaxe

Aqui está a sintaxe simples para usar este método -

selector.map( callback )

Parâmetros

Aqui está a descrição de todos os parâmetros usados por este método -

callback - A função a ser executada em cada elemento do conjunto.

Exemplo

A seguir está um exemplo simples mostrando o uso desse método -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function(){
			
            var mappedItems = $("li").map(function (index) {
               var replacement = $("<li>").text($(this).text()).get(0);
				
               if (index == 0) {
                  // make the first item all caps
                  $(replacement).text($(replacement).text().toUpperCase());
               } else if (index == 1 || index == 3) {
                  // delete the second and fourth items
                  replacement = null;
               } else if (index == 2) {
                  // make two of the third item and add some text
                  replacement = [replacement,$("<li>").get(0)];
                  $(replacement[0]).append("<b> - A</b>");
                  $(replacement[1]).append("Extra <b> - B</b>");
               }

               // replacement will be an dom element, null, 
               // or an array of dom elements
               return replacement;
            });
				
            $("#results").append(mappedItems);
         });
      </script>
		
      <style>
         body { font-size:16px; }
         ul { float:left; margin:0 30px; color:blue; }
         #results { color:red; }
      </style>
   </head>
	
   <body>

      <ul>
         <li>First</li>
         <li>Second</li>
         <li>Third</li>
         <li>Fourth</li>
         <li>Fifth</li>
      </ul>
		
      <ul id = "results">
      </ul>
   </body>
</html>

Isso produzirá o seguinte resultado -

jquery-traversing.htm

↰ Previous page