在前端开发中，经常需要对一个页面中的所有元素进行操作。其中一个非常常见的任务是迭代页面上的所有 <div> 标签，并且做一些处理。
本文将介绍如何使用 JavaScript 和 jQuery 进行迭代，并提供一些示例代码来帮助读者更好地理解这个过程。
使用 JavaScript 迭代所有的 标签
要使用纯 JavaScript 迭代所有的 <div> 标签，我们可以使用 querySelectorAll() 方法获取页面上的所有 <div> 元素，然后使用 forEach 循环遍历每一个元素。
下面是一个示例代码：
const divs = document.querySelectorAll('div');
divs.forEach(div => {
// 处理每个 <div> 元素
});这段代码首先使用 querySelectorAll() 方法获取所有的 <div> 元素，并且将它们存储在一个变量 divs 中。然后，使用 forEach 方法遍历每一个元素，对每个元素执行指定的操作。
使用 jQuery 迭代所有的 标签
如果你在项目中使用了 jQuery 库，那么迭代所有的 <div> 标签会更加简单。只需使用 $() 或 jQuery() 函数来选择所有的 <div> 元素，并使用 .each() 方法循环遍历每个元素。
下面是一个示例代码：
$('div').each(function() {
// 处理每个 <div> 元素
});这段代码首先使用 $() 或 jQuery() 函数选择所有的 <div> 元素，并且使用 .each() 方法循环遍历每个元素，对每个元素执行指定的操作。
示例代码
下面是一个简单的示例代码，演示如何使用 jQuery 迭代所有的 <div> 标签，并将它们的内容添加到一个数组中：
-- -------------------- ---- -------
--------- -----
------
------
------- -----------------------------------------------------------
-------
------
-------- --- --------
-------- --- --------
-------- --- --------
--------
----- ----- - ---
------------------------ -
---------------------------
---
------------------- -- -- ----- --- ---- ---- --- ---- ---- --- ----
---------
-------
-------在这个示例中，我们通过 $() 函数选择了页面上的所有 <div> 元素，并使用 .each() 方法迭代每个元素。然后，我们将每个元素的文本内容添加到一个数组 texts 中，并打印出这个数组。
总结
无论是使用纯 JavaScript 还是 jQuery，迭代所有的 <div> 标签都是一个非常常见的需求。通过本文的介绍和示例代码，读者应该能够掌握这个技巧，并且能够将它应用到自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31617