jQuery map( callback ) Method

« Previous Chapter Next Chapter »


The map( callback ) method translates a set of elements in the jQuery object into another set of values in a jQuery array which may, or may not contain elements.

You could use this method to build lists of values, attributes, css values - or even perform special, custom, selector transformations.


Here is the simple syntax to use this method:


selector.map( callback )


Here is the description of all the parameters used by this method:

  • callback: The function to execute on each element in the set.



   <script type="text/javascript"  src="../../js/jquery-2.2.0.js"></script>
   <script type="text/javascript" language="javascript">
      var mappedItems = $("li").map(function (index) {
      var replacement = $("<li>").text($(this).text()).get(0);
      if (index == 0) {
        // make the first item all caps
      } 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;
     body { font-size:16px; }
     ul { float:left; margin:0 30px; color:blue; }
     #results { color:red; }
  <ul id="results">
Code It Online

« Previous Chapter Next Chapter »

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!