如何每个L1之间使用jQuery

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> 

每个李时珍之间，在开始和最后。所以我的例子将看起来像这样：

<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解决方案在这里仍然会更好。你可以做很好的边框和背景的定义分隔符（有一些背景的位置调整和填充）