如何在事件中一次一个地循环浏览元素列表？答案

【问题标题】：How can I cycle through a list of elements one at a time on an event?如何在事件中一次一个地循环浏览元素列表？
【发布时间】：2021-10-05 14:11:08
【问题描述】：

我目前有一个循环遍历所有 div 并一次记录它们的索引的函数。我希望它每次按回车键时只记录一个索引。我该怎么做？

if (event.key === 'Enter') {
    var element = document.getElementsByTagName("div");

    for (var y=0; y<element.length; y++) {
        console.log(y);
    }
}

【问题讨论】：

你有什么问题？
这似乎是一个可能的xy problem，因为想要简单地记录div 索引是相当不寻常的。你想通过这个来完成什么（应用程序功能）？
您只是在问每次按 Enter 时如何运行此程序吗？将其放入 keydown 事件监听器中。
@ggorlen 在我的实际代码中，我有一个自定义 html 标签，但是当我问另一个问题并将这个标签作为“标记”时，每个人都非常困惑并专注于试图理解它的作用所以我决定这次在 div 上更改它。标签名称在这里无关紧要
@ggorlen 基本上，当用户在输入中键入内容时，它会在页面中搜索匹配的关键字并将它们包装到自定义 html 标记中。基本上我在我的网站上搜索页面，所以它就像 ctrl+f 一样工作。现在我正试图弄清楚如何从 ctrl+f 实现这个输入功能，这样当我点击输入时它会滚动到页面上的下一个匹配关键字。但是对于这一步，我只想弄清楚如何循环遍历所有关键字，一次一个，当我按 Enter 时

标签： javascript loops for-loop

【解决方案1】：

根据 cmets，听起来您想要单步执行一系列元素以响应用户按 Enter 作为搜索功能的一部分。正如您所发现的那样，循环对于这项工作来说是错误的工具，因为它会立即运行完成。相反，将索引状态保留在回调之外，并在事件触发时将其增加 1，可以选择使用模数返回到 0。例如，

const markEls = [...document.querySelectorAll("p mark")];
let highlightIndex = markEls.length - 1;

const nextMark = () => {
  markEls[highlightIndex].classList.remove("focused-mark");
  highlightIndex = (1 + highlightIndex) % markEls.length;
  markEls[highlightIndex].classList.add("focused-mark");
};
document.addEventListener("keydown", e => {
  if (e.code === "Enter") {
    nextMark();
  }
});
nextMark();

.focused-mark {
  background: #0f0;
}

<h4>click in the snippet to give it focus, then press Enter</h4>
<p>
  Quaerat nisi aut id temporibus. Pariatur sit est ut quo sit illum. Omnis et architecto rerum sit et ullam impedit laboriosam. Perspiciatis <mark>numquam aperiam</mark> est et autem porro molestias. Magnam quia explicabo dolores illum. Ea ipsam libero optio nostrum. Temporibus voluptate sunt repudiandae harum eius non. Qui excepturi voluptas qui. Quis ipsa quo <mark>voluptate</mark>. Et non repudiandae quas aut et quae tempore. Qui et ut illum est sint est. Quis veniam molestias eum et. Quia in quia consequatur molestiae. Autem deleniti et et dolores omnis eum. <mark>Pariatur voluptatem</mark> aut aperiam ex delectus et deserunt. Qui omnis eos enim error omnis occaecati dolore. Ut beatae harum doloribus voluptatem. Repellendus qui aut maxime occaecati <mark>quod ad aut</mark>. Possimus optio voluptatibus natus natus.
</p>

【讨论】：

我已经有了高亮功能，这不是我需要的。我试图只选择“标记”标签并在每次输入时输出它们的索引
我的代码不这样做吗？将console.log(highlightIndex) 添加到nextMark 中，您应该一切顺利。在nextMark 中做任何你想做的事——这只是一个概念验证模式，你可以修改它以满足你的需要。关键是您使用索引而不是循环来实现这种单步行为。