document.querySelectorAll() 只获取最后的 <li> 项

Question

我想用 .glitch class 存储所有项目的原始文本。因此，我使用 document.querySelectorAll() 来获取所有这些，但只存储了最后一个

项。

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。我怎样才能存储所有这些？

Answer 1

这一行：

originalTexts[item] = item.innerHTML;

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

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

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

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

Live Copy：

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>

Answer 2

您应该使用项目的 id 而不是项目本身作为键，因为它将被转换为字符串并且所有 <li> 元素都将被转换为 "[object HTMLLIElement]"。由于您总是为对象的同一个属性赋值，因此它的值最终成为最后一个 <li> 元素的 innerHTML。

const originalTexts = {};
document.querySelectorAll('.glitch').forEach(item => {
  originalTexts[item.id] = 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>

Answer 3

密钥是一个字符串，因此它在生成属性时执行 item.toString()。因此，为什么他们总是互相覆盖。

您要么需要使用数组，要么使用属性.

独有的东西

// Array
const originalTexts = Array.from(document.querySelectorAll('.glitch')).map(item => item.innerHTML);

console.log(originalTexts)

// Using id
const originalTexts2 = Array.from(document.querySelectorAll('.glitch')).reduce((obj, item) => (obj[item.id] = item.innerHTML) && obj, {});

console.log(originalTexts2)

<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>

document.querySelectorAll() 只获取最后的 <li> 项

document.querySelectorAll() only gets last <li> item

html

javascript

dictionary

jquery-selectors