如何用JavaScript/jQuery为每个wpb_wrapper内的span组包裹父div

需求 #

• 遍历所有带有wpb_wrapper类的div元素
• 为每个.wpb_wrapper内部的所有span标签，单独包裹一个新的div容器，每个容器的span组相互独立，不能跨容器合并

原始HTML结构 #

<div class="wpb_wrapper">
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
</div>
<div class="wpb_wrapper">
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
</div>
<div class="wpb_wrapper">
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
  <span class=""></span>
</div>

期望HTML结构 #

<div class="wpb_wrapper">
    <div class="">
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
    </div>
</div>
<div class="wpb_wrapper">
    <div class="">
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
    </div>
</div>
<div class="wpb_wrapper">
    <div class="">
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
      <span class=""></span>
    </div>
</div>

错误代码及问题 #

你尝试的代码会将所有.wpb_wrapper中的span全部移动到第一个容器的新div里，不符合需求：

jQuery('.wpb_wrapper').each(function(){
    jQuery(this).find('span').wrapAll('<div class=""/>');
});

正确解决方案 #

jQuery 实现 #

核心是确保在.each()循环中，每次只处理当前.wpb_wrapper内部的span，使用children()可以更精准地定位直接子元素span（如果你的span嵌套在其他元素里，就用find()）：

jQuery('.wpb_wrapper').each(function() {
  // 缓存当前容器元素，避免重复DOM查询
  const $currentWrapper = jQuery(this);
  // 包裹当前容器内的所有span
  $currentWrapper.children('span').wrapAll('<div class=""></div>');
});

原生JavaScript 实现 #

如果不需要依赖jQuery，可以用原生API完成：

// 获取所有目标容器
const wrappers = document.querySelectorAll('.wpb_wrapper');

wrappers.forEach(wrapper => {
  // 获取当前容器内的所有span
  const spans = wrapper.querySelectorAll('span');
  if (spans.length === 0) return; // 没有span则跳过

  // 创建新的div容器
  const container = document.createElement('div');
  // 可选：给新div添加类名
  // container.className = "span-container";

  // 将所有span移动到新div中
  spans.forEach(span => container.appendChild(span));
  
  // 将新div添加回原容器
  wrapper.appendChild(container);
});

可运行测试代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.wpb_wrapper { border: 1px solid #333; margin: 10px 0; padding: 10px; }
.wpb_wrapper > div { border: 1px dotted red; padding: 5px; }
.wpb_wrapper > div > span { border: 1px dashed blue; padding: 3px; margin: 0 2px; }
</style>
<div class="wpb_wrapper">
  <span class="">0</span>
  <span class="">0</span>
  <span class="">0</span>
  <span class="">0</span>
</div>
<div class="wpb_wrapper">
  <span class="">1</span>
  <span class="">1</span>
  <span class="">1</span>
  <span class="">1</span>
</div>
<div class="wpb_wrapper">
  <span class="">2</span>
  <span class="">2</span>
  <span class="">2</span>
  <span class="">2</span>
</div>
<script>
jQuery('.wpb_wrapper').each(function() {
  jQuery(this).children('span').wrapAll('<div class=""></div>');
});
</script>

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