Cleaner Weg, um das erste Vorkommen von Buchstaben auf der Kontaktliste zu zeigen?

Question

Ich habe eine funktionierende jQuery-Lösung, aber es scheint, es sollte eine sauberere Möglichkeit geben, nur den ersten Buchstaben einer Liste von Kontaktnamen anzuzeigen.

Ich kann die Datenbank verwenden, um nach dem ersten Buchstaben zu gruppieren, aber ich hatte gehofft, alle Datensätze geordnet alphabetisch sortiert und nur anzuzeigen. Dies zeigt sie alle mit dem ersten Buchstaben neben ihnen, aber ich möchte nur das erste Vorkommen jedes Buchstabens anzeigen.

Es ist eine Liste der Kontakte alphabetisch sortiert, und ich möchte nur das erste Vorkommen jedes Buchstabens anzeigen. Ich habe CSS-only-Lösungen ausprobiert und konnte diese nicht zum Laufen bringen.

Answer 1

Mit dieser HTML-Struktur glaube ich nicht, dass es möglich ist, dies mit CSS allein zu erreichen.

Wenn Sie die Kontakte mit demselben Anfangsbuchstaben in Div-Blöcke gruppieren, ist es möglich.

<div class="list"> 

    <div class="contact-group"> 
    <div class="contact"> 
     <p>Adam</p> 
    </div> 
    <div class="contact"> 
     <p>Alan</p> 
    </div> 
    </div> 

    <div class="contact-group"> 
    <div class="contact"> 
     <p>Barry</p> 
    </div> 
    <div class="contact"> 
     <p>Brendan</p> 
    </div> 
    </div> 

</div> 

See my example here