利用JavaScript/jQuery进行HTML元素包装的正确姿势

jQuery(document).ready(function($) {
    const $subMenu = $('.sub-menu');

    // 假设我们要将前3个<li>元素包装到第一个div中
    const $firstColDiv = $('<div class="sub-menu-col"></div>');

    // 获取前3个<li>元素
    const $firstThreeLis = $subMenu.children('li').slice(0, 3);

    // 将这些<li>元素追加到新的div中
    $firstColDiv.append($firstThreeLis);

    // 将新的div插入到原ul中的正确位置（在第一个li之前）
    $subMenu.prepend($firstColDiv);

    // 假设我们要将剩余的2个<li>元素包装到第二个div中
    const $secondColDiv = $('<div class="sub-menu-col"></div>');

    // 获取剩余的2个<li>元素 (原始的第4和第5个)
    const $lastTwoLis = $subMenu.children('li').slice(1, 3); // 注意：因为第一个div已经插入，ul的直接li子元素索引发生了变化
                                                          // 更稳健的做法是再次查找或使用原始集合的剩余部分

    // 更稳健的获取剩余元素方式：在第一次操作前获取所有li，然后切片
    const $allOriginalLis = $subMenu.children('li');
    const $remainingLis = $allOriginalLis.slice(3, 5); // 原始的第4和第5个

    $secondColDiv.append($remainingLis);

    // 将第二个div插入到原ul中的正确位置（在第一个div之后）
    // 由于第一个div已经插入，且其内部包含了前三个li，
    // 现在的ul直接子元素是第一个div和剩余的两个li
    // 我们可以将其插入到ul的末尾，或者在第一个div之后
    $subMenu.append($secondColDiv); 

    // 最终的DOM结构会变成：
    // <ul class="sub-menu">
    //   <div class="sub-menu-col">...前3个li...</div>
    //   <div class="sub-menu-col">...后2个li...</div>
    // </ul>
});

<ul class="sub-menu" style="display:flex">
   <li class="open1col"><a>Treatment Trials</a></li>
   <li class=""><a>Alzheimer’s</a></li>
   <li class="close1col open2col"><a href="">Asthma</a></li>
   <li class=""><a>COVID-19 Treatment</a></li>
   <li class="close2col"><a>COPD</a></li>
</ul>

<ul class="sub-menu" style="display:flex">
   <div class="sub-menu-col">
      <li class="open1col"><a>Treatment Trials</a></li>
      <li class=""><a>Alzheimer’s</a></li>
      <li class="close1col open2col"><a href="">Asthma</a></li>
   </div>
   <div class="sub-menu-col">
      <li class=""><a>COVID-19 Treatment</a></li>
      <li class="close2col"><a>COPD</a></li>
   </div>
</ul>

jQuery(document).ready(function($) {
    const $subMenu = $('.sub-menu');

    // 获取所有直接的<li>子元素
    const $allLis = $subMenu.children('li');

    // 将前3个<li>元素包装到第一个div中
    $allLis.slice(0, 3).wrapAll('<div class="sub-menu-col">');

    // 将剩余的2个<li>元素（即原始的第4和第5个）包装到第二个div中
    // 注意：wrapAll会修改DOM，但它会将被包裹的元素从其原始位置移除，
    // 然后将新的包裹元素插入到第一个被包裹元素的原位置。
    // 因此，直接对原始集合的剩余部分进行切片是安全的。
    $allLis.slice(3, 5).wrapAll('<div class="sub-menu-col">');
});