javascript - 使用 javascript 重构 html

Question

我有一个常规的无序链接列表，我想使用 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>

我想要以下输出:

<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>

我来回尝试了几种不同的解决方案，但最终结果非常困惑，所以我实际上没有任何代码可以显示。这是如何以巧妙的方式完成的？如果重要的话，该网站正在使用 jQuery 1.4.4。

Answer 1

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');

引用文献

• .wrapAll()
• .unwrap()
• .contents()
• .replaceWith()
• .slice()
• .length
• this keyword
• .innerHTML