<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
非常に簡単です。新しく作成した div 要素にspan要素を追加するだけです。ただし、問題は、それを wgb_wrapper の最後に追加すると仮定していることです。