как добавить Li между каждой Li с помощью 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

Edited удовлетворить комментаторов;)

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

Я все еще думаю, используя каждый будет полезен, как это делает дальнейшие изменения легче, но Вы можете сделать это так:

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

PS. Чистое решение CSS по-прежнему будет лучше здесь. Вы можете сделать сепараторы с хорошими определениями границ или фона (с некоторой позицией фона тонкой настройкой и отступы)