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

Question

我有一个从 00h 到 23h 的 select 选项列表，这个选项每小时更新一次，select 当前小时并添加 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>

所以对于这个例子，我想获取所有元素 select 或者从 18 到 23

Answer 1

你可以试试：

var elements = document.querySelector(".option-text");

然后你可以使用elements.filter()来过滤想要的元素

Answer 2

要获取具有 is-active 和其后续兄弟的元素，您可以对元素使用选择器组（例如 span.is-active，或者只是.is-active) 及其后续兄弟姐妹 ~ (span.is-active, span.is-active ~ span)，general sibling combinator.

在CSS中：

span.is-active, span.is-active ~ span {
    /*...*/
}

或在 querySelectorAll 调用中（在文档或包含元素上）：

const spans = document.querySelectorAll("span.is-active, span.is-active ~ span");

示例：

const spans = document.querySelectorAll("span.is-active, span.is-active ~ span");
console.log(Array.from(spans, e => e.textContent));

<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>

我在那里使用了 span，但如果您想更加开放，则不必使用：.is-active, .is-active ~ * 就可以了。

Answer 3

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

.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>

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

How to extract all elements from selector with attribute active to the last element

javascript

selector