时间戳

首页 > 解决方案 > 如何从具有活动属性的选择器中提取所有元素到最后一个元素

javascript - 如何从具有活动属性的选择器中提取所有元素到最后一个元素

问题描述

我有一个从 00h 到 23h 的选择选项列表，这个选项每小时更新一次，选择当前时间并添加is-active属性，所以我想从这个属性中获取所有元素到最后一个元素这是我的代码

<span class="jsx-674775893 option-text left">00</span>
<span class="jsx-674775893 option-text left">01</span>
.
.
<span class="jsx-674775893 option-text left is-active">18</span>
.
<span class="jsx-674775893 option-text left">22</span>
<span class="jsx-674775893 option-text left">23</span>

所以对于这个例子，我想获得从 18 到 23 的所有元素选择器

标签： javascriptselector

解决方案

使用~ 选择器将获得兄弟姐妹。而且由于您想包含活动元素，因此您还需要使用逗号将其添加到选择器中，这样您就可以将两者都包含在结果中。

  • .option-text.is-active选择活动元素
  • .option-text.is-active ~ .option-text选择活动元素之后的兄弟姐妹

var elementWithSiblings = document.querySelectorAll(".option-text.is-active, .option-text.is-active ~ .option-text");
console.log(elementWithSiblings.length)
<div>
  <span class="jsx-674775893 option-text left">00</span>
  <span class="jsx-674775893 option-text left">01</span>
  <span class="jsx-674775893 option-text left is-active">18</span>
  <span class="jsx-674775893 option-text left">22</span>
  <span class="jsx-674775893 option-text left">23</span>
</div>

推荐阅读