使用 tabindex=0 查找下一个/上一个元素？

Question

有没有办法用

tabindex="0"

查找下一个/上一个（按文档顺序）元素？

我得到的最接近的是：

                case 'Tab':
                    let item = node.closest('.listbox').nextElementSibling
                    do {
                        const focusable = item.querySelector('[tabindex="0"]')
                        if (focusable) {
                            focusable.focus()
                            break;
                        }
                        item = item.nextElementSibling
                        if (item == null) break;
                    } while (!item.querySelector('[tabindex="0"]'))
                    break;

但这仅限于家长级别。

Answer 1

querySelector

或类似函数已经按 DOM 遍历顺序返回项目。您可以创建一次项目列表并返回一个在所选项目上递增/递减的对象，而不是在每次迭代时遍历它们：

const Items = Array.from(document.querySelectorAll('[tabindex="0"]'));
const clamp = (nr) => Math.max(0, Math.min(Items.length - 1, nr));
function iterate (item) {
  let currIdx = Items.indexOf(item?.querySelector('[tabindex="0"]'));
  return {
    current: () => Items[currIdx]
    next: () => { currIdx = clamp(currIdx + 1); return Items[currIdx]},
    previous: () => { currIdx = clamp(currIdx - 1); return Items[currIdx]}
  }
}

如果文档内容发生更改，请使用

MutationObserver

或类似机制刷新

Items

。

PS：我可能有语法错误，如果你发布一个示例，我将在其上运行它