Bagaimanakah saya boleh membungkus satu set elemen HTML dalam elemen HTML induk menggunakan JavaScript atau jQuery dan menyimpannya dalam setiap elemen induk?

Question

Saya cuba membungkus semua teg

di dalam teg

Saya ingin mencari semua elemen dengan nama kelas wpb_wrapper, kemudian cari semua kumpulan tag ini dalam satu < teg div> dalam wpb_wrapper supaya setiap kumpulan teg dalam wpb_wrapper teg dalam teg

Daripada ini:

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

Perubahan kepada ini:

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

Saya mencuba ini, tetapi ia masih mengambil semua teg dalam wpb_wrapper teg /span>

<

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

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

.wpb_wrapper { border: 1px solid;
.wpb_wrapper > div { sempadan: 1px bertitik merah }
.wpb_wrapper > div >


  0
  0
  0
  0


  1
  1
  1
  1


  2
  2
  2
  2

Answer 1

  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>

Sangat mudah, kami hanya menambahkan elemen span pada elemen div yang baru dibuat. Walau bagaimanapun, masalahnya ialah kami menganggap kami menambahkannya pada penghujung wgb_wrapper.