Search code examples
javascriptjquerydomjquery-1.4

Restructuring html with javascript

I have a regular unordered list of links, which I would like to change using js

<ul>
  <li><a href="#">Theme 1</a></li>
  <li><a href="#">Theme 2</a></li>
  <li><a href="#">Theme 3</a></li>
  <li><a href="#">Theme 4</a></li>
  <li><a href="#">Theme 5</a></li>
  <li><a href="#">Theme 6</a></li>
  <li><a href="#">Theme 7</a></li>
  <li><a href="#">Theme 8</a></li>
  <li><a href="#">Theme 9</a></li>
  <li><a href="#">Theme 10</a></li>
  <li><a href="#">Theme 11</a></li>
  <li><a href="#">Theme 12</a></li>
</ul>

I would like the following output:

<div class="themes__row">
  <div class="themes__item><a href="#">Theme 1</a></div>
  <div class="themes__item><a href="#">Theme 2</a></div>
  <div class="themes__item><a href="#">Theme 3</a></div>
  <div class="themes__item><a href="#">Theme 4</a></div>
</div>
<div class="themes__row">
  <div class="themes__item><a href="#">Theme 5</a></div>
  <div class="themes__item><a href="#">Theme 6</a></div>
  <div class="themes__item><a href="#">Theme 7</a></div>
  <div class="themes__item><a href="#">Theme 8</a></div>
</div>
<div class="themes__row">
  <div class="themes__item><a href="#">Theme 9</a></div>
  <div class="themes__item><a href="#">Theme 10</a></div>
  <div class="themes__item><a href="#">Theme 11</a></div>
  <div class="themes__item><a href="#">Theme 12</a></div>
</div>

I have tried a few different solutions back and forth, but it ends up being really messy, so I dont really have any code to show. How is this done in a clever way? The site is using jQuery 1.4.4 if that matters.

Solution

  • DEMO

    $('ul').each(function () {
    var lis = $('li', this);
    for (var i = 0; i < lis.length; i += 4) {
        lis.slice(i, i + 4).wrapAll('<div class="themes__row"></div>');
    }
    $('.themes__row li').replaceWith(function () {
        return '<div class="themes__item">' + this.innerHTML + '</div>';
    });
}).contents().unwrap('ul');

    Reftrences