comment ajouter li entre chaque li en utilisant Jquery

Question

j'ai ce HTML CODE

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

Je veux ajouter

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

entre de chaque li, au début et à la fin. donc mon exemple ressemblera à ceci:

<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> 

Quelle est la meilleure façon de le faire en utilisant jquery?

Answer 1

Like this:

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

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

Answer 2

Edité pour satisfaire les commentateurs;)

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

Je pense toujours en utilisant chacun est utile car il fait d'autres changements plus facile, mais vous pouvez le faire comme ça:

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

PS. Une solution CSS pure serait encore mieux ici. Vous pouvez faire des séparateurs avec des définitions de bonne frontière ou de fond (avec quelques ajustements de position de fond et rembourrages)