title: Wrap Group of Classes With HTML
body: <p>I have an unordered list that has about 25 list items that have different classes after each 5 list items. Example below.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="foo1"&gt;Hello&lt;/li&gt;
      &lt;li class="foo1"&gt;Hello&lt;/li&gt;
      &lt;li class="foo1"&gt;Hello&lt;/li&gt;
      &lt;li class="foo1"&gt;Hello&lt;/li&gt;
      &lt;li class="foo1"&gt;Hello&lt;/li&gt;
      &lt;li class="foo2"&gt;Hello&lt;/li&gt;
      &lt;li class="foo2"&gt;Hello&lt;/li&gt;
      &lt;li class="foo2"&gt;Hello&lt;/li&gt;
      &lt;li class="foo2"&gt;Hello&lt;/li&gt;
      &lt;li class="foo2"&gt;Hello&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I need to wrap each 5 list items within that class in an ul. These list items are outputted by a CMS, so I can't code it myself. I know I can use jquery .wrap() on the class, but that would wrap each list item with that class in an ul. So how can I wrap the 5 list items that have the class with an ul?</p>
  
  <p>The output should be this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;ul&gt;
          &lt;li class="foo1"&gt;Hello&lt;/li&gt;
          &lt;li class="foo1"&gt;Hello&lt;/li&gt;
          &lt;li class="foo1"&gt;Hello&lt;/li&gt;
          &lt;li class="foo1"&gt;Hello&lt;/li&gt;
          &lt;li class="foo1"&gt;Hello&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul&gt;
          &lt;li class="foo2"&gt;Hello&lt;/li&gt;
          &lt;li class="foo2"&gt;Hello&lt;/li&gt;
          &lt;li class="foo2"&gt;Hello&lt;/li&gt;
          &lt;li class="foo2"&gt;Hello&lt;/li&gt;
          &lt;li class="foo2"&gt;Hello&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/ul&gt;
  </code></pre>