Maison  >  Questions et réponses  >  le corps du texte

Comment puis-je envelopper un ensemble d'éléments HTML dans un élément HTML parent à l'aide de JavaScript ou de jQuery et les conserver dans chaque élément parent ?

<p>J'essaie d'envelopper toutes les balises <span> dans une balise </span></p><div> dans une autre balise <div> Je souhaite rechercher tous les éléments portant le nom de classe <code>wpb_wrapper</code>, puis rechercher toutes les balises <span> qu'ils contiennent et envelopper ces groupes de balises <span> div> dans wpb_wrapper</code> afin que chaque groupe de balises enfants <span> dans <code>wpb_wrapper</code> soit toujours un élément enfant, mais enveloppé dans une balise <div> <span> dans une balise <div> distincte sur la page. <p><br /></p> <p>À partir de ceci :</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>Modifications apportées à ceci :</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>J'ai essayé ceci, mais il récupère toujours toutes les balises <span> dans <code>wpb_wrapper</code> et les enveloppe dans le premier <code>wpb_wrapper</code> /span></p><div> tag<p><br /></p> <pre class="brush:php;toolbar:false;">jQuery('.wpb_wrapper').each(function(){ jQuery(this).find('span').wrapAll('<div class=""/>'); });</pré> <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 { bordure : 1px pointillé rouge } .wpb_wrapper > div > span { bordure : 1px en pointillé bleu }</code></pre> <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></pre> <p><br /></p></div></div></span></div></span></div></span> </span></div></div>
P粉204136428P粉204136428452 Il y a quelques jours426

répondre à tous(1)je répondrai

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

    Très simple, nous ajoutons simplement l'élément span à l'élément div nouvellement créé. Cependant, le problème est que nous supposons que nous l'ajoutons à la fin de wgb_wrapper.

    répondre
    0
  • Annulerrépondre