JQuery map()方法

JQuery map()方法

jQuery中的这个map()方法是用来将一个数组或对象中的所有项目转换为新的项目数组。

语法:

jQuery.map( array/object, callback )

参数:该方法接受两个参数,即上面提到的和下面描述的。

  • Array/object:该参数持有要翻译的数组或对象。
  • callback:这个参数持有处理每个项目的函数。

返回值:它返回数组。

下面的例子说明了jQuery中map()方法的使用。

例子1:这个例子使用jQuery.map()方法并返回数组元素的平方。

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>JQuery | map() method</title>
    <script src=
"https://code.jquery.com/jquery-3.4.1.js">
    </script>
  
</head>
  
<body style="text-align:center;">
  
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1>
  
    <h3>JQuery | map() method</h3>
    <b>Array = [2, 5, 6, 3, 8, 9]</b>
    <br>
    <br>
    <button onclick="geek()">Click</button>
    <br>
    <br>
    <b id="root"></b>
  
    <script>
        function geek() {
            var el = document.getElementById('root');
            var arr = [2, 5, 6, 3, 8, 9];
  
            var newArr = jQuery.map(arr, function(val, index) {
                return {
                    number: val,
                    square: val * val
                };
            })
            el.innerHTML = JSON.stringify(newArr);
        }
    </script>
</body>
  
</html>

输出:
JQuery map()方法

例2:本例使用map()方法将字符 “A “与名字的每个字符连接起来。

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>JQuery | map() method</title>
    <script src=
"https://code.jquery.com/jquery-3.4.1.js">
    </script>
  
</head>
  
<body style="text-align:center;">
  
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1>
  
    <h3>JQuery | map() method</h3>
    <b>String = "Shubham"</b>
    <br>
    <br>
    <button onclick="geek()">Click</button>
    <br>
    <br>
    <b id="root"></b>
  
    <script>
        function geek() {
            var el = document.getElementById('root');
            var name = "Shubham";
            name = name.split("");
  
            // New array of character and names  
            // concatenated with 'A'  
            var newName = jQuery.map(name, function(item) {
                return item + 'A<br>';
            })
            el.innerHTML = newName;
        }
    </script>
</body>
  
</html>                     

输出:
JQuery map()方法

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程