JQuery - Sélectionnez tout sauf la dernière liste (parmi plusieurs listes.)

Question

Je me demande si c'est la manière la plus élégante et efficace de faire ceci?

J'ai plusieurs listes 'tag', et via CSS, je veux que les tags apparaissent en ligne (affichage: inline) et soient séparés par des virgules. Le défi que je vais avoir est d'ajouter des virgules à tous, mais le dernier élément de la liste dans chaque ul.tagList:

<ul class="outerList"> 
    <li> 
     <div class="innerContainer"> 
      <ul class="tagList"> 
       <li>Tag A</li> 
       <li>Tag B</li> 
       <li>Tag C</li> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <div class="innerContainer"> 
      <ul class="tagList"> 
       <li>Tag D</li> 
       <li>Tag E</li> 
       <li>Tag F</li> 
      </ul> 
     </div> 
    </li> 
</ul> 

Pour ajouter des virgules sur tous les éléments de la liste ul.tagList, mais le dernier, je l'utilise:

$('ul.tagList').children(':not(:last-child)').append(','); 

et ce produit:

Tag A, B Tag, Tag C

Tag D, E Tag, Tag F

Est-ce la meilleure façon de procéder?

Aussi pourquoi ne : pas (: last-child) travail mais pas : non (: dernière) dans ce contexte?

Merci beaucoup pour votre aide + explications.

Prembo.

Answer 1

:last ne fonctionne pas dans ce contexte, car elle ne correspond un élément, à savoir la dernière .

last-child peut correspondre à plus d'éléments, un pour chaque parent.

Votre code semble assez bien, en utilisant .not() au lieu d'interroger avec Sizzle pourrait améliorer légèrement les performances.

$('ul.tagList').children().not(':last-child').append(','); 

Answer 2

Cela a été posté il y a longtemps, mais semblé bon de poster pour quelqu'un d'autre (comme moi) qui regarde ce poste comme une référence. J'ai fait un jsPerf pour les deux cas mentionnés ci-dessus, plus que je me suis ajouté à l'aide .prevAll()

$('.tagList').children(':last-child').prevAll().css('background-color', 'yellow'); 

Il est légèrement plus rapide

http://jsperf.com/all-but-last-performance