按类名分组HTML元素：将连续p.foo元素包裹进同一div

原生JavaScript实现思路 #

核心是分组连续的p.foo元素，再对每组进行包裹：

1. 先定位目标容器，遍历其直接子元素
2. 遍历过程中收集连续的p.foo，遇到非目标元素时，立即对当前收集的元素组进行包裹，随后重置分组
3. 遍历结束后，处理最后一组可能剩余的p.foo

代码示例：

const container = document.querySelector('.container'); // 替换成你的容器选择器
let currentGroup = [];

// 遍历容器的直接子元素
for (const child of container.children) {
  if (child.matches('p.foo')) {
    currentGroup.push(child);
  } else {
    // 遇到非目标元素，处理当前分组
    if (currentGroup.length > 0) {
      wrapGroup(currentGroup);
      currentGroup = [];
    }
  }
}

// 处理最后一组未完成的分组
if (currentGroup.length > 0) {
  wrapGroup(currentGroup);
}

// 分组包裹核心函数
function wrapGroup(elements) {
  const wrapDiv = document.createElement('div');
  wrapDiv.classList.add('wrap');
  
  // 将元素依次移入包裹div
  elements.forEach(el => {
    wrapDiv.appendChild(el);
  });
  
  // 将包裹div插入到原组第一个元素的位置
  elements[0].parentNode.insertBefore(wrapDiv, elements[0]);
}

jQuery实现（若使用jQuery） #

利用jQuery内置的.wrapAll()方法，配合.nextUntil()可快速处理连续元素：

$('p.foo').not('.wrap p.foo').each(function() {
  $(this).nextUntil(':not(p.foo)').addBack().wrapAll('<div class="wrap"></div>');
});

• .not('.wrap p.foo')：避免重复处理已被包裹的元素
• .nextUntil(':not(p.foo)')：获取当前p.foo之后所有连续的同类型元素
• .addBack()：将当前元素加入选中集合
• .wrapAll()：把整个元素集合包裹进同一个div.wrap

关键注意事项 #

• 遍历需针对容器的直接子元素，避免嵌套元素干扰分组逻辑
• 操作时移动元素而非复制，保证DOM结构的准确性
• 若页面元素为动态生成，需在元素加载完成后再执行代码

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