如何在JavaScript中选择指定类的下一个元素

针对你的需求，这里提供两种原生JS解决方案，分别适配不同结构场景：

方案一：遍历兄弟节点（适合平级元素场景） #

如果目标class_two和点击的class_one处于同一父级下，直接遍历当前元素的后续兄弟节点即可快速定位：

let class_one = document.querySelectorAll('.class_one');

class_one.forEach(element => {
    element.addEventListener('click', () => {
        // 从当前元素的下一个兄弟节点开始遍历
        let current = element.nextElementSibling;
        while (current) {
            if (current.classList.contains('class_two')) {
                // 这里以添加选中样式为例，可替换为你需要的操作
                current.classList.add('selected');
                console.log('找到目标元素:', current);
                break; // 找到后终止循环，避免无效遍历
            }
            current = current.nextElementSibling;
        }
    })
});

方案二：全局查找后续第一个元素（适配嵌套结构） #

如果存在复杂嵌套层级，需要找到DOM树中当前元素之后出现的第一个class_two元素，可以用节点位置比较的方式实现：

let class_one = document.querySelectorAll('.class_one');
// 预存所有class_two元素，避免每次点击重复查询DOM
const allClassTwo = document.querySelectorAll('.class_two');

class_one.forEach(element => {
    element.addEventListener('click', () => {
        let target = null;
        for (const el of allClassTwo) {
            // 判断当前元素是否在点击元素的DOM顺序之后
            if (element.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) {
                target = el;
                break;
            }
        }
        if (target) {
            // 执行选中操作，示例为添加样式
            target.classList.add('selected');
            console.log('找到目标元素:', target);
        }
    })
});

补充提示 #

• 若需要取消之前的选中状态，可在点击事件开头先移除所有class_two元素的selected类
• 你可以根据业务需求，将classList.add('selected')替换为高亮、修改内容等自定义操作

内容的提问来源于stack exchange，提问作者Aldahir Ruiz Valdez