JavaScript または jQuery を使用して一連の HTML 要素を親 HTML 要素内でラップし、各親要素内に保持するにはどうすればよいですか?

Question

<p>JavaScript または jQuery を使用して、すべての <span> タグを 1 つの </span></p><div> タグ内に別の <div> タグ内にラップしようとしています。クラス名が <code>wpb_wrapper</code> であるすべての要素を検索し、その中のすべての <span> タグを検索し、これらの <span> タグ グループを各 <code> 内の個別の <gt; 内でラップしたいと考えています。 wpb_wrapper</code> 内の div> タグにより、<code>wpb_wrapper</code> 内の子 <span> タグの各グループは引き続き子要素ですが、それぞれをラップするのではなく < ;div> タグ内にラップされます。 <span> タグをページ上の別の <div> タグ内に追加します。 <p><br /></p> <p>これから:</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>これを変更します:</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>これを試してみましたが、それでも、<code>wpb_wrapper</code> 内のすべての <span> タグを取得し、それを別の <gt;wpb_wrapper</code> の最初の <code>wpb_wrapper</code> にラップするだけです。 /span><

タグ

<pre class="brush:php;toolbar:false;">jQuery('.wpb_wrapper').each(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 { border: 1px 点線の赤; } .wpb_wrapper > div > span { border: 1px 青の破線; }</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"> <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粉204136428470日前439

Answer 1

リーリー リーリー

非常に簡単です。新しく作成した div 要素にspan要素を追加するだけです。ただし、問題は、それを wgb_wrapper の最後に追加すると仮定していることです。