Docent.querySelectorAll()仅获取最后&lt；li&gt；项 [英] document.querySelectorAll() only gets last <li> item

问题描述

我希望使用.glitch类存储所有项目的原始文本。因此，我使用document.querySelectorAll()获取所有这些项，但只存储最后<；li>；项。

HTML：

<nav id="nav-bar" class="nav-bar">
        <ul>
            <li id="1" class="focusable glitch">Home</li>
            <li id="2" class="focusable glitch">Projects</li>
            <li id="3" class="focusable glitch">Contact</li>
        </ul>
    </nav>

js：

document.querySelectorAll('.glitch').forEach(item => {
    originalTexts[item] = item.innerHTML;
});

我在其中保存文本的字典(我又添加了两个条目，看它是否能得到它们)：

[object HTMLHeadingElement]: " Example Header"
[object HTMLLIElement]: "Contact"
[object HTMLParagraphElement]: "Example Paragraph"

如您所见，它只存储一个HTMLLIElement。如何将它们全部存储？

推荐答案

该行：

originalTexts[item] = item.innerHTML;

将item隐式转换为字符串，然后为结果属性赋值。所有li项的字符串将是相同的："[object HTMLLIElement]"。因此，第二个循环迭代向前覆盖前一个循环迭代的值。

您需要使用唯一标识符。要做到这一点，一种方法是将回调接收的索引作为第二个参数与字符串结合使用(或者，如果li都有ID，就像您的一样，这将是可行的)，但我想我会选择其他字符串作为名称的基础。

示例(但同样，我会选择其他字符串，而不是隐式将item转换为字符串)：

document.querySelectorAll('.glitch').forEach((item, index) => {
    originalTexts[`${item}_${index}`] = item.innerHTML;
});

实时拷贝：

const originalTexts = {};
document.querySelectorAll('.glitch').forEach((item, index) => {
    originalTexts[`${item}_${index}`] = item.innerHTML;
});
console.log(originalTexts);

<nav id="nav-bar" class="nav-bar">
    <ul>
        <li id="1" class="focusable glitch">Home</li>
        <li id="2" class="focusable glitch">Projects</li>
        <li id="3" class="focusable glitch">Contact</li>
    </ul>
</nav>

这篇关于Docent.querySelectorAll()仅获取最后&lt；li&gt；项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！