Using Jquery to wrap dynamic content with html tags

dom, html, jquery

Solution

Here's another method that generates the HTML dynamically and follows correct semantics allowing only `<li>` elements directly inside of `<ul>` elements:

$(function(){
    const GROUP_COUNT = 3;
    var liElements = $('ul > li');
    var count = liElements.length;
    var html = '';

    for (var i = 0; i < count; i += GROUP_COUNT) {
        html += '<li><ul>';
        liElements.slice(i, i + GROUP_COUNT).each(function(){
            html += '<li>' + $(this).html() + '</li>';
        });
        html += '</ul></li>';
    }

    $('ul').html(html);
});

You can change `GROUP_COUNT` to group by a different number of elements.

This code will transform:

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
</ul>

Into:

<ul>
  <li>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>item7</li>
    </ul>
  </li>
</ul>

Problem

I have a page that returns a dynamic list of items ``` <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> </ul> ``` I need a way to insert tags around every grouping of 3 list elements. Basically transform the code above into this ``` <ul> <div> <li>item1</li> <li>item2</li> <li>item3</li> </div> <div> <li>item4</li> <li>item5</li> <li>item6</li> </div> </ul> ``` I have been playing around with the Jquery Wrap(),WrapAll(), WrapInner()... but with no success so far. Greatly appreciate any solutions or ideas on this.

Original source