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

Question

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

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

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

Answer 1

根据评论，听起来您想要逐步浏览一系列元素，以响应用户按 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>

Answer 2

您可以使用 keyup 事件侦听器在按下 Enter 键时获取事件：

 var input = document.getElementById("myInput"); input.addEventListener("keyup", function(event) { var element = document.getElementsByTagName("div"); for (let y=0; y<element.length; y++) { console.log(y); } });

 <input id="myInput" value="Some text.."> <div> Your HTML code here </div>