使用 JS 查找具有特定类的下一个元素
要使用JavaScript查找具有特定类的下一个元素：
- 使用 nextElementSibling 获取下一个元素兄弟。
- 在 while 循环中迭代下一个兄弟姐妹。
- 检查每个元素的类列表是否包含特定类。
以下是本文示例的 HTML。
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box">Box 1</div> <div class="second">Box 2</div> <div class="third">Box 3</div> <script src="index.js"></script> </body> </html>
下面是Js代码
index.jsconst box = document.getElementById('box'); let third; let placeholder = box.nextElementSibling; while (placeholder) { if (placeholder.classList.contains('third')) { third = placeholder; break; } placeholder = placeholder.nextElementSibling; } console.log(third); // 👉️ div.third
我们使用了一个 while 循环来遍历 id 为 box 的元素的下一个兄弟元素。
nextElementSibling 属性返回紧随调用该方法的元素之后的元素，如果该元素是列表中的第一个元素，则返回 null。
while循环的基本工作原理是 - 它不断迭代，直到括号之间的表达式返回一个假值或我们中断它。
JavaScript 中的假值是：null、undefined、false、0、""（空字符串）、NaN（不是数字）。
所以我们知道最终，我们要么找到类别为第三的节点，要么到达列表中的最后一个元素并跳出
while循环。
我们使用 classList.contains 方法检查类 third 是否包含在元素的类列表中。
如果是，我们将元素分配给第三个变量并跳出 while 循环。否则，我们将占位符变量分配给下一个同级元素。
如果具有特定类的元素不存在于该元素的下一个兄弟元素中，则永远不会为第三个变量分配一个元素，并将保持设置为未定义的值。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
