如何用jQuery将每4个<li>子元素分别移动到新父<ul>中？

要实现把原列表的<li>按每4个一组分配到目标区域的两个<ul>里，你可以这样修改代码：

$(document).ready(function() {
  // 获取所有需要填充的目标ul容器
  const targetUls = $(".container_row .wrap ul");
  // 获取原菜单下的所有li元素
  const menuItems = $(".sub_menu li");
  // 定义每个容器要放置的元素数量
  const itemsPerGroup = 4;

  // 遍历每个目标容器，分配对应数量的li
  targetUls.each(function(index) {
    // 计算当前容器对应的li起始和结束索引
    const start = index * itemsPerGroup;
    const end = start + itemsPerGroup;
    // 截取对应范围的li并追加到当前容器
    $(this).append(menuItems.slice(start, end));
  });

  // 可选：移除不再需要的原sub_menu容器
  $(".sub_menu").remove();
});

代码细节解释： #

• 先获取目标容器集合和所有待分配的<li>元素，同时明确每组的元素数量（这里是4）。
• 用.each()遍历每个目标<ul>，根据容器的索引计算要截取的<li>范围：第一个容器取索引0-3的元素，第二个取4-7的元素。
• .slice(start, end)方法会返回指定范围的DOM元素集合，再通过.append()将这些元素移动到目标容器中（DOM元素在页面中只能存在一个位置，移动后原位置的元素会自动移除）。
• 如果原.sub_menu容器已经没有保留的必要，可以调用.remove()删除它，让页面结构更简洁。

运行这段代码后，就能得到你期望的最终HTML结构了。

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