极客教程jQuery 如何迭代 jQuery 选择器的结果
在本文中，我们将介绍如何使用 jQuery 迭代 jQuery 选择器的结果，并提供示例来说明其用法。
阅读更多：jQuery 教程
使用 each() 方法进行迭代
jQuery 提供了 each() 方法来迭代一个 jQuery 选择器的结果。该方法可以接受一个函数作为参数，并将每个元素作为参数传递给该函数。
以下是使用 each() 方法迭代的示例：
$("li").each(function(index) {
let text = $(this).text();
console.log("第 " + (index + 1) + " 个元素的文本是：" + text);
});
上述示例中，我们选择了所有的 <li> 元素，并使用 each() 方法迭代它们。在每次迭代中，我们使用函数获取元素的文本，并将其打印到控制台。注意，函数中的 this 关键字表示当前正在迭代的元素。
使用 for 循环进行迭代
除了使用 each() 方法，我们还可以使用 for 循环迭代 jQuery 选择器的结果。首先，我们可以使用 toArray() 方法将 jQuery 对象转换为数组，然后使用数组的长度属性和索引来进行迭代。
以下是使用 for 循环迭代的示例：
let elements = ("li").toArray();
for (let i = 0; i(elements[i]).text();
console.log("第 " + (i + 1) + " 个元素的文本是：" + text);
}
上述示例中，我们首先使用 toArray() 方法将 <li> 元素转换为一个数组。然后，我们使用 for 循环迭代该数组，并在每次迭代中获取元素的文本并将其打印到控制台。
迭代集合中的子元素
有时候，我们可能只想迭代某个父元素下的子元素，而不是整个选择器的结果。这时，我们可以使用 find() 方法来获取指定父元素下的子元素，然后使用 each() 方法或 for 循环进行迭代。
以下是迭代集合中的子元素的示例：
let parent = ("#parent");
parent.find("li").each(function(index) {
let text =(this).text();
console.log("父元素下的第 " + (index + 1) + " 个子元素的文本是：" + text);
});
上述示例中，我们通过 ID 选择器选择了一个父元素，并使用 find() 方法获取该父元素下的所有 <li> 子元素。然后，我们使用 each() 方法迭代这些子元素，并获取它们的文本并打印到控制台。
使用 map() 方法进行迭代并返回新集合
除了 each() 和 for 循环，jQuery 还提供了 map() 方法，它可以对一个 jQuery 选择器的结果进行迭代，并返回一个新的 jQuery 集合。
以下是使用 map() 方法进行迭代并返回新集合的示例：
let newElements = ("li").map(function() {
let text =(this).text();
return "<li>" + text.toUpperCase() + "</li>";
});
console.log(newElements);
上述示例中，我们首先选择了所有的 <li> 元素，并使用 map() 方法迭代它们。在每次迭代中，我们将原始文本转换为大写，并返回一个新的包含新文本的 <li> 元素。最后，我们将新的元素集合打印到控制台。
总结
在本文中，我们学习了如何使用 jQuery 迭代一个 jQuery 选择器的结果。我们了解了使用 each() 方法、for 循环、find() 方法以及 map() 方法进行迭代的不同方式，并提供了相应的示例说明。通过掌握迭代的用法，我们可以更好地操作和处理 jQuery 选择器的结果，使我们的网页开发工作变得更加高效和灵活。
点击此处访问原文链接。