cari

Rumah  >  Soal Jawab  >  teks badan

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

<p>Saya cuba membungkus semua <span> teg </span></p><div> di dalam teg <div> Saya ingin mencari semua elemen dengan nama kelas <kod>wpb_wrapper</code>, kemudian cari semua <span> kumpulan tag <span> ini dalam satu < teg div> dalam wpb_wrapper</code> supaya setiap kumpulan <span> teg dalam <code>wpb_wrapper</code> teg <span> dalam teg <div> <p><br /></p> <p>Daripada ini:</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Perubahan kepada ini:</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Saya mencuba ini, tetapi ia masih mengambil semua teg <span> dalam <kod>wpb_wrapper</code> teg /span></p><div>< <pre class="brush:php;toolbar:false;">jQuery('.wpb_wrapper').setiap(function(){ jQuery(this).find('span').wrapAll('<div class=""/>'); });</pre> <p><br /></p> <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery('.wpb_wrapper').each(function() { jQuery(this).find('span').wrapAll('<div class=""/>'); }); console.log(document.body.innerHTML);</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.wpb_wrapper { border: 1px solid; .wpb_wrapper > div { sempadan: 1px bertitik merah } .wpb_wrapper > div > <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pra> <p><br /></p></div></div></span></div></span></div></span> </span></div></div>
P粉204136428P粉204136428454 hari yang lalu429

membalas semua(1)saya akan balas

  • P粉659518294

    P粉6595182942023-08-18 11:38:00

      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.

    balas
    0
  • Batalbalas