用 javascript 重构 html [关闭]答案

【问题标题】：Restructuring html with javascript [closed]用 javascript 重构 html [关闭]
【发布时间】：2013-11-06 03:29:18
【问题描述】：

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

【问题讨论】：

这与 HTML 无关，与 DOM 有关。我已经修复了标签。

标签： javascript jquery dom jquery-1.4

【解决方案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');

引用

【讨论】：

【解决方案2】：

你可以这样使用：

var items = $("ul li a");
var parent = items.eq(0).closest("ul"), cntr = 0;
for (var i = 0; i < items.length / 4; i++) {
    var container = $('<div class="themes__row"></div>');
    for (var j = 0; j < 4; j++) {
        $('<div class="themes__item"><a href="#">' + items.eq(cntr++).html() + '</a></div>').appendTo(container);
    }
    $(document.body).append(container);
}
parent.remove();

工作演示：http://jsfiddle.net/jfriend00/7zWt9/

【讨论】：

使用wrapAll方法不是更好吗？ api.jquery.com/wrapAll
@fatman - 可以使用，但仍然必须将它们分成 4 块，并且您仍然必须创建大部分新元素，所以我不确定它是否有多大帮助。
不是想说你在做什么是错的，只是提供了一种改进它的方法，我认为它会比字符串 concat 更好:)

【解决方案3】：

您可以使用此代码：

var target = $('ul');
var elems = target.children('li').contents(); //get li contents

for (var i = 0; i < elems.length; i++) {
    var elem = document.createElement('div');
    elem.className = 'themes__item';
    elem.appendChild(elems[i]); //wrap contents in divs

    //append divs to rows
    if (i % 4 == 0) { //if elem index is multiple of 4
        //create a new row and add elem
        $('<div class="themes__row">').insertBefore(target).append(elem); 
    } else {
        target.prev().append(elem); //else append elem to existing row
    }
}
target.remove(); // remove ul

在这里观看直播http://jsfiddle.net/valentin/u6LkM/3/

【讨论】：