Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。
想改善这个问题吗? Update the question,所以它是on-topic,用于堆栈溢出。
6年前关闭。
我有一个常规的无序链接列表,我想使用js进行更改
我想要以下输出:
我已经来回尝试了几种不同的解决方案,但是最终结果很混乱,因此我没有任何代码可以显示。如何巧妙地做到这一点?如果重要的话,该网站正在使用jQuery 1.4.4。
引用
.wrapAll()
.unwrap()
.contents()
.replaceWith()
.slice()
.length
this keyword
.innerHTML
想改善这个问题吗? Update the question,所以它是on-topic,用于堆栈溢出。
6年前关闭。
我有一个常规的无序链接列表,我想使用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。
最佳答案
$('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
关于javascript - 用javascript重组html,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19616500/