jquery.map()方法的使用详解

jquery.map()方法是一种可以用来映射jQuery对象数组元素的方法。在使用该方法时，我们可以通过传入一个回调函数来将元素映射到新的值，这样就得到了一个新的数组。

使用该方法的语法如下：

$(selector).map(callback)

其中，selector 代表需要映射的 jQuery 对象数组；callback 代表被映射的回调函数，该回调函数接收每一个原数组元素作为参数，并返回该元素经过处理得到的新值。

下面，我们通过两个示例来详细说明 jquery.map() 方法的使用。

示例一：

假设我们现在有一个包含三个数字的数组：[1, 2, 3]，现在我们需要将这个数组的元素分别加上 1，并返回一个新的数组。我们可以使用 jquery.map() 方法来实现这个功能。具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery.map()方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function () {
            var nums = [1, 2, 3];
            var new_nums = $(nums).map(function (val) {
                return val + 1;
            }).get();
            console.log(new_nums); // 输出 [2,3,4]
        });
    </script>
</head>
<body>

</body>
</html>

在上面的代码中，我们首先定义了一个包含三个数字的数组 nums，然后使用 $() 方法将其转化为 jQuery 对象数组，接着调用 map() 方法并传入一个回调函数。在回调函数中，我们将原数组的元素加 1 并返回了新的值。最后使用 get() 方法获取到新数组的值并输出在控制台上。

示例二：

假设我们现在有一个存放姓名信息的表格，其中每一行都有一个 checkbox 元素用于选择该行，我们希望能够将被选中行的姓名信息提取出来，并以列表的形式展示出来。我们可以使用 jquery.map() 方法来实现这个功能。具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery.map()方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btn-show-selected").click(function () {
                var selected = $("input[type='checkbox']:checked").map(function () {
                    return $(this).closest("tr").find("td:eq(1)").text();
                }).get();
                if (selected.length > 0) {
                    var msg = "您已选择以下员工：\n";
                    msg += selected.join("\n");
                    alert(msg);
                } else {
                    alert("请至少选择一位员工。");
                }
            });
        });
    </script>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>工号</th>
        <th>所属部门</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>1001</td>
        <td>行政部</td>
        <td><input type="checkbox" name="employee"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>1002</td>
        <td>财务部</td>
        <td><input type="checkbox" name="employee"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>1003</td>
        <td>技术部</td>
        <td><input type="checkbox" name="employee"></td>
    </tr>
    </tbody>
</table>
<button id="btn-show-selected">提取选中员工</button>
</body>
</html>

在上面的代码中，我们首先定义了一个表格，并在每一行的最后一列添加了一个 checkbox 元素。接着，在页面加载完成后，我们为按钮绑定了一个点击事件。

当用户点击按钮时，我们会首先获取到所有被选中的 checkbox 元素，并调用 map() 方法将每个 checkbox 元素所在的行的第二个 td 元素（即姓名信息）提取出来，组成一个新的数组并输出在控制台上。

需要注意的是，在第一行的代码中，我们通过$("input[type='checkbox']:checked")的选择器，获取所有被选中的checkbox。接着，在映射的回调函数中，我们调用$(this).closest("tr").find("td:eq(1)").text()查找到该checkbox所在的行的第二个td元素。最后，利用 get() 方法将名称信息的数组获取出来，并且将其通过 join() 方法组成字符串，输出在消息框中。

通过以上两个示例，我们可以了解到 jquery.map() 方法的使用细节和用处。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery.map()方法的使用详解 - Python技术站

jquery.map()方法的使用详解

示例一：

示例二：

相关文章