jqueryで特定の要素をdivで囲う

質問

jqueryを使い、HTMLの特定の要素をdivで囲いたいと思っています。

元のHTMLのソースは、
=========
<div class="tabWrap02 tabSwitcher materialityRefine">

<h2 class="headline06 jqa mb20" style="display: none;"></h2>
<ul class="tabNav range9Col textSmall organizationRefine range17Col upper">
<li class="needTitle active" style="height: 50px;"></li>
<li></li>
<li></li>
</ul>

<ul class="spAcodNav">
<li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;">
<li></li>
</ul>
<div id="tab02-1" class="tabDetail" style="display: none;">
</div>

<ul class="spAcodNav">
<li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;">
<li></li>
</ul>
<div id="tab02-2" class="tabDetail" style="display: none;">
</div>

<h2 class="headline06 mb20">×××</h2>
<ul class="tabNav range8Col textSmall mb50 range17Col upper">
<li class="active" style="height: 65px;"></li>
<li></li>
<li></li>
</ul>

<h2 class="headline06 jqa mb20" style="display: none;"></h2>
<ul class="tabNav range9Col textSmall organizationRefine range17Col upper">
<li class="needTitle active" style="height: 50px;"></li>
<li></li>
<li></li>
</ul>

<ul class="spAcodNav">
<li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;">
<li></li>
</ul>
<div id="tab02-3" class="tabDetail" style="display: none;">
</div>

<ul class="spAcodNav">
<li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;">
<li></li>
</ul>
<div id="tab02-4" class="tabDetail" style="display: none;">
</div>
</div>
=========

このようになっております。
上記のソースを、以下のように２か所<div class="wrap">で<ul class="spAcodNav">を囲いたいと思っています。

=========
<div class="tabWrap02 tabSwitcher materialityRefine">
<h2 class="headline06 mb20">●●●</h2>
<ul class="tabNav range8Col textSmall mb50 range17Col upper">
<li class="active" style="height: 65px;"></li>
<li></li>
<li></li>
</ul>

<h2 class="headline06 jqa mb20" style="display: none;"></h2>
<ul class="tabNav range9Col textSmall organizationRefine range17Col upper">
<li class="needTitle active" style="height: 50px;"></li>
<li></li>
<li></li>
</ul>

<div class="wrap">
<ul class="spAcodNav">
<li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;">
<li></li>
</ul>
<div id="tab02-1" class="tabDetail" style="display: none;">
</div>

<ul class="spAcodNav">
<li class=""></li></ul><div id="tab02-2" class="tabDetail" style="display: none;">
<li></li>
</ul>
<div id="tab02-2" class="tabDetail" style="display: none;">
</div>
</div>

<h2 class="headline06 mb20">×××</h2>
<ul class="tabNav range8Col textSmall mb50 range17Col upper">
<li class="active" style="height: 65px;"></li>
<li></li>
<li></li>
</ul>

<h2 class="headline06 jqa mb20" style="display: none;"></h2>
<ul class="tabNav range9Col textSmall organizationRefine range17Col upper">
<li class="needTitle active" style="height: 50px;"></li>
<li></li>
<li></li>
</ul>

<div class="wrap">
<ul class="spAcodNav">
<li class=""></li></ul><div id="tab02-3" class="tabDetail" style="display: none;">
<li></li>
</ul>
<div id="tab02-3" class="tabDetail" style="display: none;">
</div>

<ul class="spAcodNav">
<li class=""></li></ul><div id="tab02-4" class="tabDetail" style="display: none;">
<li></li>
</ul>
<div id="tab02-4" class="tabDetail" style="display: none;">
</div>
</div>
</div>
=========

jqueryでwrapAllなどを使って試しているのですが、うまいいかず、
お分かりいただける方いらっしゃいましたらご教授いただけますと幸いです。

よろしくお願い致します。

回答No.2

babu_baboo · ベストアンサー

jQuery 使うほどではないと思うのだけれど、無理くり１行で済む。
Array.from (document.querySelectorAll ('h2+ul+ul.spAcodNav')).forEach (e =>
e.parentNode.insertBefore (document.createElement ('div'), e).appendChild (e).parentNode.className = 'wrap');

お礼

babu_baboo様

度々のご回答をありがとうございます。

私の方でjQueryを使って対応することができたのですが、無理やり感がすごく、また行数も多くなってしまいましたので、後ほどご参考にさせていただきつつ、上手く組み込めればご使用させていただきたいと思います。

jQueryを使わずに1行で、とのことで大変勉強になりました。

具体的な解決案をご提示いただきまして、ありがとうございます。

回答No.1

babu_baboo

<li class=""></li></ul><div id="tab02-1" class="tabDetail" style="display: none;">
その前に構造がおかしい
"</ul>" が余計と "</div>"が不足。

お礼

babu_baboo様

早速のご回答をありがとうございます。
ご指摘いただきました箇所ですが、正しくは以下のとおりでした。

<ul class="spAcodNav">
<li class="">
<a href="#tab02-1"><span class="eqChildLink">全体</span></a>
</li>
</ul>

ご指摘をどうもありがとうございます。