如何使用原生JavaScript将带有特定前缀的列表元素移动到对应目标元素

实现逻辑 #

• 约定列表项匹配前缀为*，可自定义修改
• 遍历目标ul的所有直接子li，识别带指定前缀的列表项
• 连续的前缀列表项会被自动归入最近的、不带前缀的前置li下，作为其子列表

完整代码 #

/**
 * 处理列表层级转换
 * @param {HTMLElement} rootUl 要处理的根ul元素
 * @param {string} prefix 匹配的前缀符号，默认是*
 */
function processNestedList(rootUl, prefix = '*') {
  const firstLevelLis = Array.from(rootUl.children).filter(el => el.tagName === 'LI');
  // 记录当前可归属的父li和对应的子ul
  let activeParentLi = null;
  let activeSubUl = null;

  firstLevelLis.forEach(li => {
    const trimText = li.textContent.trimStart();
    if (trimText.startsWith(prefix)) {
      // 没有可归属的父li时不处理
      if (!activeParentLi) return;
      // 没有子ul则先创建
      if (!activeSubUl) {
        activeSubUl = document.createElement('ul');
        activeParentLi.appendChild(activeSubUl);
      }
      // 移动节点到子ul
      activeSubUl.appendChild(li);
    } else {
      // 遇到非前缀项，重置当前父级容器
      activeParentLi = li;
      activeSubUl = null;
    }
  });
}

使用示例 #

给你要处理的ul添加id标识：

<ul id="myList">
  <li>one</li>
  <li>two</li>
  <li>*three</li>
  <li>*fore</li>
  <li>*five</li>
  <li>six</li>
  <li>saven</li>
  <li>*aite</li>
  <li>*nine</li>
  <li>ten</li>
</ul>

页面加载完成后调用处理方法即可：

document.addEventListener('DOMContentLoaded', () => {
  const targetList = document.getElementById('myList');
  // 传入要处理的ul和自定义前缀，这里用默认的*
  processNestedList(targetList);
});

注意事项 #

• 连续前缀项如果前面没有非前缀的父li，会保留在原位置，避免出现无归属的DOM结构错误
• 该方法直接移动原有DOM节点，会保留li上原有的类名、样式、事件绑定等属性
• 可以通过第二个参数自定义匹配前缀，比如要匹配#开头的项，调用时传入processNestedList(targetList, '#')即可

内容的提问来源于stack exchange，提问作者محمد امين