如何解决document.querySelectorAll仅获得最后一个<li>项目
我想使用.glitch类存储所有项目的原始文本。因此,我使用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。如何存储所有这些?
解决方法
此行:
originalTexts[item] = item.innerHTML;
将item
隐式转换为字符串,然后将一个值分配给结果属性。所有li
项的字符串都是相同的:"[object HTMLLIElement]"
。因此,第二个循环迭代开始覆盖上一个循环迭代的值。
您将需要使用唯一标识符。一种方法是将回调收到的索引作为第二个参数与字符串结合使用(或者,如果li
都具有ID,就像您的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>
,
您应将项目的ID代替项目本身用作键,因为它将被转换为字符串,并且所有<li>
元素都将转换为"[object HTMLLIElement]"
。由于您总是将值分配给对象的相同属性,因此其值最终作为最后一个innerHTML
元素的<li>
。
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>
,
键是一个字符串,因此它在创建属性时正在执行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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。