Question

由于我不清楚的原因，我发现自己处于这样的HTML位置：

<ol>
    <li>...</li>
</ol>


 ... stuff

<ol start="2">
  <li>...</li>
</ol>

... more stuff

<ol start="3">
  <li>...</li>
</ol>

好吧，对吧？好吧，我现在必须忍受它。我将努力将所有这些内容由内而外翻阅，以便将来在#deadlines之外列出“适当的”列表。

由于我将“列表”分为几个单独的列表，是否有办法表明它们都属于同一列表？我主要考虑的是屏幕阅读器和其他辅助技术，这些技术希望知道列表之类的内容何时连续，即使它们是页面中的不同结构元素。

Answer 1

您可以在<ol>元素中设置自定义数据属性，然后在JS中使用querySelectorAll检索它们，如下所示：

let elementsQuery = document.querySelectorAll('ol[data-list="list1"]');
let nodes = [];
for (let i = 0; i < elementsQuery.length; i++) {
  nodes.push(elementsQuery[i]);
}
console.log(nodes);

<ol data-list="list1">
    <li>...</li>
</ol>


 ... stuff

<ol start="2" data-list="list1">
  <li>...</li>
</ol>

... more stuff

<ol start="3" data-list="list1">
  <li>...</li>
</ol>

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

有没有一种方法可以将单独的“恢复”有序列表元素分组以表明它们都相关？

1 个答案: