javascript - 动态更改的列表无法按预期工作 - 需要纯 js
问题描述
我想动态更改列表元素的顺序。单击后,单击的元素应跳转到第一个位置。但它总是跳到最后一个地方。有什么建议吗?
const ulElement = document.getElementById('nav-list');
const fragment = document.createDocumentFragment();
const listItems = ['Home', 'Work', 'Contact'];
listItems.forEach((item) => {
const li = document.createElement('li');
li.textContent = item;
li.setAttribute('id', item.toLowerCase());
li.addEventListener('click', (event) => {
listItems.forEach((items, i) => {
if (items.toLowerCase() === event.target.id) {
listItems.splice(i, 1);
listItems.unshift(event.target.id);
}
fragment.appendChild(li);
});
ulElement.appendChild(fragment);
console.log(ulElement);
});
fragment.appendChild(li);
});
ulElement.appendChild(fragment);
<ul id="nav-list"></ul>
解决方案
换行:
ulElement.appendChild(fragment);
和:
ulElement.insertBefore(fragment, ulElement.firstChild);
推荐阅读
- python - 如何在scrapy项目范围之外将不同的管道传递给CrawlerProcess中的不同蜘蛛?
- ubuntu - 尝试安装 neovim 配置时无法 mkdir
- css - 为什么列调整大小图标会变为橙色?
- javascript - 页面刷新后继续点击 CSS 更改
- swift - 在多个(超过 2 个)视图控制器中显示一个通用进度条
- r - 作为控制台或终端执行的函数,相同 Rdata 对象的大小差异
- javascript - 两次导入同一个模块会引发 ReferenceError
- reactjs - graphql中的动态查询名称
- node.js - AWS Rabbitmq 与 nodejs 连接失败
- testing - 如何在 Jetpack Compose 中使用 Rotation Change 测试 rememberSaveable