如何提取从带is-active属性的选择元素到列表末尾的所有同级元素

方案1：遍历后续兄弟节点（性能更优） #

无需提前遍历全部小时元素，直接从激活元素往后遍历即可：

// 定位激活元素
const activeHourEl = document.querySelector('.option-text.is-active');
const targetEls = [];
let current = activeHourEl;
// 遍历所有后续兄弟元素直到末尾
while (current) {
  if (current.classList?.contains('option-text')) targetEls.push(current);
  current = current.nextElementSibling;
}
// targetEls 即为从当前激活小时到23点的所有元素

方案2：数组切片（代码更简洁） #

适合你这种元素总数固定（24个）的场景，代码可读性更高：

// 拿到所有小时选项转成数组
const allHourEls = Array.from(document.querySelectorAll('.option-text'));
// 找到激活元素的下标
const activeIndex = allHourEls.findIndex(el => el.classList.contains('is-active'));
// 从激活下标开始截取到数组末尾，就是需要的元素
const targetEls = allHourEls.slice(activeIndex);

两种方案都适配每小时自动更新激活状态的场景，需要获取最新数据时重新执行对应代码即可。

内容的提问来源于stack exchange，提问作者EL-AJI Oussama