如何为包裹ul的li添加class？下拉菜单开发技术问题

看起来你已经有了核心思路，我来帮你补全代码并实现这个功能——把以_开头的菜单项转为前一个菜单的子菜单，同时给父菜单的li添加标识类。

完整JavaScript代码 #

$(document).ready(function() {
  var prevParentLi;
  
  // 遍历菜单下的每个li项
  $('#menu li').each(function() {
    var $currentLi = $(this);
    var linkText = $currentLi.find('a').text().trim();
    
    // 检测当前菜单项文本是否以_开头
    if (/^_/.test(linkText)) {
      // 移除文本开头的下划线，优化显示效果
      var cleanedText = linkText.replace(/^_/, '');
      $currentLi.find('a').text(cleanedText);
      
      // 如果父菜单还没有子菜单容器，自动创建ul
      if (!prevParentLi.find('ul').length) {
        prevParentLi.append('<ul class="submenu"></ul>');
        // 给父li添加标识类，方便后续做下拉样式
        prevParentLi.addClass('has-submenu');
      }
      
      // 将当前子菜单项移到父菜单的子容器中
      prevParentLi.find('ul').append($currentLi);
    } else {
      // 记录当前非子菜单项，作为下一个子菜单的父项
      prevParentLi = $currentLi;
    }
  });
});

代码逻辑说明 #

1. DOM加载监听：用$(document).ready()包裹代码，确保在页面元素全部加载完成后执行，避免找不到DOM节点的问题。
2. 遍历检测：逐个检查每个li下的链接文本，通过正则/^_/判断是否为子菜单项。
3. 文本清理：自动移除子菜单文本开头的_，让菜单显示更规整。
4. 子容器创建：如果父菜单还没有子菜单的ul容器，自动创建并给父li添加has-submenu类（类名可根据需求修改）。
5. 结构重组：把符合条件的子菜单项移动到父菜单的子容器中，形成标准的嵌套下拉菜单结构。

处理后的最终HTML结构 #

执行代码后，你的原始平级列表会变成如下嵌套结构：

<ul id="menu">
  <li class="has-submenu">
    <a href="#">Menu 1</a>
    <ul class="submenu">
      <li><a href="#">Submenu x</a></li>
      <li><a href="#">Submenu y</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

注意事项 #

• 如果你原始菜单的id是nav而不是menu，记得把代码中的$('#menu')改成$('#nav')。
• 可以根据自己的样式需求，修改has-submenu和submenu这两个类名。
• 确保页面已经引入了jQuery库，否则代码无法正常运行。

内容的提问来源于stack exchange，提问作者SSK