jquery怎么循环集合

jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作,在jQuery中,我们可以使用多种方法来循环遍历集合,例如.each().map().filter()等,本文将详细介绍如何使用这些方法进行循环遍历。

jquery怎么循环集合
(图片来源网络,侵删)

1、.each()方法

.each()方法是jQuery中最常用的循环遍历方法,它可以遍历一个数组或对象,并对每个元素执行指定的函数,基本语法如下:

$(selector).each(function(index, element))

selector是要遍历的元素选择器,function(index, element)是每次遍历时要执行的回调函数,index表示当前元素的索引,element表示当前遍历到的元素。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery Each Example</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <ul id="fruits">
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>
    <script>
        $(document).ready(function() {
            $("#fruits li").each(function(index, element) {
                console.log("Fruit: " + $(element).text());
            });
        });
    </script>
</body>
</html>

在这个示例中,我们使用.each()方法遍历id为"fruits"的无序列表中的每个列表项,并在控制台输出每个水果的名称。

2、.map()方法

.map()方法也是jQuery中常用的循环遍历方法,它可以遍历一个数组或对象,并对每个元素执行指定的函数,然后将结果组成一个新的数组返回,基本语法如下:

$(selector).map(function(index, element))

selector是要遍历的元素选择器,function(index, element)是每次遍历时要执行的回调函数,index表示当前元素的索引,element表示当前遍历到的元素,与.each()方法不同的是,.map()方法会返回一个新的数组,而不会修改原始数组。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery Map Example</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <ul id="fruits">
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>
    <script>
        $(document).ready(function() {
            var fruits = $("#fruits li").map(function(index, element) {
                return $(element).text();
            }).get(); // 将生成的数组转换为普通数组
            console.log(fruits); // 输出:["Apple", "Banana", "Orange"]
        });
    </script>
</body>
</html>

在这个示例中,我们使用.map()方法遍历id为"fruits"的无序列表中的每个列表项,并将每个水果的名称组成一个新的数组返回,然后我们将生成的jQuery对象数组转换为普通数组,并在控制台输出。

3、.filter()方法

.filter()方法也是jQuery中常用的循环遍历方法,它可以遍历一个数组或对象,并根据指定条件筛选出符合条件的元素,基本语法如下:

$(selector).filter(function(index, element))

selector是要遍历的元素选择器,function(index, element)是每次遍历时要执行的回调函数,index表示当前元素的索引,element表示当前遍历到的元素,与前两种方法不同的是,.filter()方法会返回一个新的jQuery对象,包含筛选出的元素,如果需要返回普通数组,可以使用.get()方法。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>jQuery Filter Example</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <ul id="fruits">
        <li class="apple">Apple</li>
        <li class="banana">Banana</li>
        <li class="orange">Orange</li>
        <li class="grape">Grape</li>
    </ul>
    <script>
        $(document).ready(function() {
            var filteredFruits = $("#fruits li").filter(function(index, element) {
                return $(element).hasClass("apple"); // 筛选出class为"apple"的元素
            }).get(); // 将生成的jQuery对象数组转换为普通数组
            console.log(filteredFruits); // 输出:["Apple"](文本内容)和[object HTMLLIElement](DOM元素)组成的数组(根据浏览器不同)
        });
    </script>
</body>
</html>

原创文章,作者:酷盾叔,如若转载,请注明出处:https://www.kdun.com/ask/363147.html

本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。

(0)
酷盾叔的头像酷盾叔订阅
上一篇 2024-03-21 23:51
下一篇 2024-03-21 23:52

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

产品购买 QQ咨询 微信咨询 SEO优化
分享本页
返回顶部
云产品限时秒杀。精选云产品高防服务器,20M大带宽限量抢购 >>点击进入