Question

我有这个HTML代码

<ul id='container'>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>

我想添加

<li class='separator'></li>

每个li之间，开头和最后之间的

。所以我的例子看起来像这样：

<ul id='container'>
<li class='separator'></li>
<li>a</li>
<li class='separator'></li>
<li>b</li>
<li class='separator'></li>
<li>c</li>
<li class='separator'></li>
<li>d</li>
<li class='separator'></li>
<li>e</li>
<li class='separator'></li>
<li>f</li>
<li class='separator'></li>
</ul>

使用jquery做到这一点的最佳方法是什么？

Answer 1

Like this:

var separatorHtml = '<li class="separator"></li>'

$('ul#container').children('li').after(separatorHtml)
$('ul#container').prepend(separatorHtml);

Answer 2

编辑以满足评论员;）

$('li').each(function(){
$(this).after('<li></li>');
}).filter(':first').before('<li></li>');

我仍然认为使用每种方法都很有用，因为它可以让您进一步更改，但您可以这样做：

$('li').after('<li></li>').filter(':first').before('<li></li>');

PS。纯CSS解决方案在这里仍然会更好。您可以使用具有良好边框或背景定义的分隔符（具有一些背景位置调整和填充）

如何使用Jquery在每个li之间添加li

2 个答案: