I am looking to group multiple li elements within two div containers by using jQuery's wrapAll method. The challenge lies in the fact that these items are rendered within a single <ul> element via a CMS. Here is the current setup:
<ul>
<li class="list-1">
<span>1</span>
<span>2</span>
<span>3</span>
</li>
<li class="list-2">
<span>1</span>
<span>2</span>
<span>3</span>
</li>
<li class="list-3">
<span>1</span>
<span>2</span>
<span>3</span>
</li>
<li class="list-4">
<span>1</span>
<span>2</span>
<span>3</span>
</li>
</ul>
The goal is to group list-1 and list-2 within one div, and list-3 with list-4 into another div. This way, we achieve the following result:
<ul>
<div class="group-1">
<li class="list-1">
<span>1</span>
<span>2</span>
<span>3</span>
</li>
<li class="list-2">
<span>1</span>
<span>2</span>
<span>3</span>
</li>
</div>
<div class="group-2">
<li class="list-3">
<span>1</span>
<span>2</span>
<span>3</span>
</li>
<li class="list-4">
<span>1</span>
<span>2</span>
<span>3</span>
</li>
</div>
</ul>I am exploring if it's possible to use something like this:
$( "li:nth-child(1), li:nth-child(2)" ).wrapAll( "<div class='group-1'></div>" );
Any suggestions or guidance on achieving this would be greatly appreciated!