• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • map()

    通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象。

  • .map(callback(index, domElement))
    • callback(index, domElement)类型: Function()一个函数对象,会在处理集合中的每个元素时被调用。
  • 如果你想处理一个简单的数组或对象中,使用jQuery.map()代替。

    由于返回值是一个jQuery包裹的数组,所以通常会使用get()方法将其转换成普通的数组。

    .map()方法特别适用于获取或设置元素集合中的值。例如,如下的表单中包含一组 checkbox 框:

    <form method="post" action="">
      <fieldset>
        <div>
          <label for="two">2</label>
          <input type="checkbox" value="2" id="two" name="number[]">
        </div>
        <div>
          <label for="four">4</label>
          <input type="checkbox" value="4" id="four" name="number[]">
        </div>
        <div>
          <label for="six">6</label>
          <input type="checkbox" value="6" id="six" name="number[]">
        </div>
        <div>
          <label for="eight">8</label>
          <input type="checkbox" value="8" id="eight" name="number[]">
        </div>
      </fieldset>
    </form>
    

    我们可以得到一个用逗号分隔的复选框ID:

    $(':checkbox').map(function() {
          return this.id;
        }).get().join();
    

    此调用的结果是字符串,"two,four,six,eight".

    在回调函数中,this指向每次迭代中的当前DOM元素。该函数可以返回一个单独的数据或数据数组,并在结果集合中插入。如果数组返回,数组中的元素插入到集合。如果函数返回nullundefined,没有元素将被插入。

    例子:

    获取表单中所有表单元素的值。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      p { color:red; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <p><b>Values: </b></p>
      <form>
        <input type="text" name="name" value="John"/> 
        <input type="text" name="password" value="password"/>
        <input type="text" name="url" value="https://www.lanmper.cn" />
     
      </form>
    <script>
        $("p").append( $("input").map(function(){
          return $(this).val();
        }).get().join(", ") );
    </script>
     
    </body>
    </html>
    

    Values:

    一个展示一些功能的人为示例。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      body { font-size:16px; }
      ul { float:left; margin:0 30px; color:blue; }
      #results { color:red; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
     
        <li>Fourth</li>
        <li>Fifth</li>
      </ul>
      <ul id="results">
     
      </ul>
    <script>
    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 a dom element, null,
         or an array of dom elements */
      return replacement;
    });
    $("#results").append(mappedItems);
     
    </script>
     
    </body>
    </html>
    
    • First
    • Second
    • Third
    • Fourth
    • Fifth

      均衡div的高度。

      <!DOCTYPE html>
      <html>
      <head>
        <style>
      div { width: 40px; float:left; }
      input { clear:left}
        </style>
        <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
      </head>
      <body>
       
       
      <input type="button" value="equalize div heights">
       
      <div style="background:red; height: 40px; "></div>
      <div style="background:green; height: 70px;"></div>
      <div style="background:blue; height: 50px; "></div>
       
       
      <script>
      $.fn.equalizeHeights = function() {
        var maxHeight = this.map(function(i,e) {
          return $(e).height();
        }).get();
       
        return this.height( Math.max.apply(this, maxHeight) );
      };
       
      $('input').click(function(){
        $('div').equalizeHeights();
      });
       
      </script>
       
      </body>
      </html>
      

      上篇:slice()

      下篇:odd()