如何用jQuery将相邻sub-sub-menu ul移至前置has-children li中

你遇到的问题是因为直接使用$('.has-children').append($('.sub-sub-menu'))时，jQuery会把所有匹配到的.sub-sub-menu元素都追加到第一个.has-children元素里，这是jQuery集合操作的特性。要实现每个.sub-sub-menu对应移动到它前面紧邻的.has-children li中，我们可以通过遍历每个.sub-sub-menu元素，单独处理它们的归属：

具体jQuery代码 #

$(document).ready(function() {
  // 遍历每个sub-sub-menu元素
  $('.sub-sub-menu').each(function() {
    // 获取当前sub-sub-menu前面紧邻的.has-children li
    const $targetLi = $(this).prev('.has-children');
    // 将当前sub-sub-menu追加到目标li内部
    $targetLi.append(this);
  });
});

代码解释 #

1. $(document).ready()：确保代码在DOM完全加载后执行，避免操作还未渲染的元素。
2. .each()遍历：逐个处理每个.sub-sub-menu，保证每个元素都能找到自己对应的父级li。
3. .prev('.has-children')：精准获取当前.sub-sub-menu的前一个兄弟元素（也就是它对应的.has-children li），避免错误匹配其他li。
4. .append(this)：将当前遍历到的.sub-sub-menu元素移动到目标li内部，这里的this指向当前循环的DOM元素，确保只移动当前这一个菜单。

修改后的HTML结构示例（第一个菜单） #

执行代码后，第一个菜单的结构会变成符合规范的形式：

<ul class="sub-menu" aria-labelledby="desktop-submenu">
 <li class="has-children current-page-ancestor current-page-parent">
  <a href="/improve-clinical-care/clear/" class="current_page_item">Clear</a>
  <ul class="sub-sub-menu">
   <li class="level-three">
    <a href="/improve-clinical-care/clear/clears-story/" class="current_page_item">Clear's Story</a>
   </li>
   <li class="level-three current-menu-item page-item-34 current_page_item">
    <a href="/improve-clinical-care/clear/sign-up-for-clear/" class="current_page_item">Sign-Up for Clear<span class="sr-only">(current)</span></a>
   </li>
  </ul>
 </li>
 <!-- 第二个菜单同理 -->
 <li class="has-children critical-care">
  <a href="/improve-clinical-care/critical-care/" class="current_page_item">Critical Care</a>
  <ul class="sub-sub-menu">
   <!-- 子菜单内容 -->
  </ul>
 </li>
</ul>

这样修改后，每个ul.sub-sub-menu都成为了对应li.has-children的子元素，完全符合HTML的嵌套规范（ul的直接子元素只能是li，而li内部可以包含ul）。

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