如何使用JavaScript或jQuery将一组HTML元素包裹在一个父HTML元素中，并使它们保持在每个父元素内？-PHP中文网问答

我正在尝试使用JavaScript或jQuery将所有标签包装在一个

标签中的另一个

标签中。我想要找到所有具有类名为wpb_wrapper的元素，然后在其中查找所有的标签，并将这些标签组包装在每个wpb_wrapper中的一个单独的

标签中，以便每个wpb_wrapper中的子标签组仍然是子元素，但是包装在内部的一个

标签中，而不是在页面上的每个标签中都包装在一个单独的

标签中。

从这个：

<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>

变成这个：

<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中的标签，并将其包装在第一个wpb_wrapper中的一个单独的

标签中

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

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

.wpb_wrapper { border: 1px solid; }
.wpb_wrapper > div { border: 1px dotted red; }
.wpb_wrapper > div > span { border: 1px dashed blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

const wrapper = document.querySelector('.wpb_wrapper'); const spans = wrapper.querySelectorAll('span'); const customDiv = document.createElement('div'); customDiv.classList.add('custom-div'); spans.forEach(span => { customDiv.appendChild(span); }); wrapper.appendChild(customDiv);

<div class="wpb_wrapper"> <h2><img decoding="async" class="alignnone size-full wp-image-9244" src="icon-briefcase.svg" alt="" width="24" height="24">Functional Experience</h2> <p></p> <span class=""></span> <span class=""></span> <span class=""></span> <span class=""></span> </div>