程序员教程

jQuery 过滤元素

遍历元素集合

each() 方法

要遍历一个元素集合，我们可以使用 each()方法。该方法接受一个回调函数作为参数，然后对每个匹配的元素执行该回调函数。

下面是一个示例，演示如何遍历一个包含多个 <li>元素的列表：

                $("li").each(function(index, element) {
                console.log("Index: " + index + ", Text: " + $(this).text());
                });
                

在上述代码中，我们使用 each()方法遍历所有的 <li>元素，并输出它们的索引和文本内容。

map() 方法

除了 each()方法，我们还可以使用 map()方法来对元素集合进行遍历并返回新的元素集合。

以下是一个示例，演示如何使用 map()方法获取一个包含所有 <li>元素文本内容的数组：

                let textArray = $("li").map(function() {
                return $(this).text();
                }).get();
                console.log(textArray);
                

在上述代码中，我们使用 map()方法遍历所有的 <li>元素，并利用回调函数返回每个元素的文本内容，最后通过 get()方法获取结果数组。

过滤元素集合

filter() 方法

要过滤元素集合，我们可以使用 filter()方法。该方法接受一个选择器、函数或jQuery对象作为参数，并返回符合条件的元素集合。

以下是一个示例，演示如何使用 filter()方法过滤出所有具有"active"类名的 <li>元素：

                let activeItems = $("li").filter(".active");
                console.log(activeItems);
                

在上述代码中，我们使用 filter()方法通过选择器来筛选具有"active"类名的 <li>元素，并将结果存储在 activeItems变量中。

find() 方法

除了 filter()方法，我们还可以使用 find()方法从当前元素集合中查找匹配给定选择器的子元素。

以下是一个示例，演示如何使用 find()方法查找列表中的所有 <a>元素：

                let linkElements = $("ul").find("a");
                console.log(linkElements);
                

在上述代码中，我们使用 find()方法从 <ul>元素中查找所有的 <a>元素，并将结果存储在 linkElements变量中。

总结

本教程介绍了如何使用jQuery遍历和过滤元素集合。通过 each()和 map()方法，我们可以方便地对元素集合进行遍历操作。而 filter()和find()方法则可以帮助我们筛选出符合条件的元素集合或查找子元素。