0
작동하는 jQuery 솔루션이 있지만 연락처 이름 목록의 첫 번째 알파벳 문자 만 표시하는 더 깨끗한 방법이 있어야합니다.연락처 목록에 첫 번째 문자가 표시되는 클리너 방식은 무엇입니까?
데이터베이스를 사용하여 첫 번째 글자로 그룹화 할 수 있지만 모든 레코드를 사전 순으로 정렬하여 표시하는 것이 좋습니다. 이렇게하면 옆에 첫 번째 문자가 모두 표시되지만 각 문자의 첫 번째 문자 만 표시하려고합니다.
<div class="list" id="contacts-list">
<div class="list-item">
<div class="list-item-icon">
<span class="alphabetical-letter alphabetical-letter-A">A</span>
</div>
<div class="list-item-primary">
Alpha
</div>
</div>
<div class="list-item">
<div class="list-item-icon">
<span class="alphabetical-letter alphabetical-letter-A">A</span>
</div>
<div class="list-item-primary">
Alpha
</div>
</div>
<div class="list-item">
<div class="list-item-icon">
<span class="alphabetical-letter alphabetical-letter-A">A</span>
</div>
<div class="list-item-primary">
Alpha
</div>
</div>
<div class="list-item">
<div class="list-item-icon">
<span class="alphabetical-letter alphabetical-letter-B">B</span>
</div>
<div class="list-item-primary">
Bravo
</div>
</div>
<div class="list-item">
<div class="list-item-icon">
<span class="alphabetical-letter alphabetical-letter-B">B</span>
</div>
<div class="list-item-primary">
Bravo
</div>
</div>
<div class="list-item">
<div class="list-item-icon">
<span class="alphabetical-letter alphabetical-letter-B">B</span>
</div>
<div class="list-item-primary">
Bravo
</div>
</div>
</div>
<script>
$(".alphabetical-letter-A:first").show();
$(".alphabetical-letter-B:first").show();
...
</script>
# CSS
.alphabetical-letter {
display: none;
}
영문자 순으로 정렬 된 연락처 목록이며 각 문자의 첫 번째 항목 만 표시하려고합니다. CSS 전용 솔루션을 사용해 보았지만 작동하지 못했습니다.
(익명으로) 연락처와 약간 큰 세트)? 'A', 'B'및 'C'의 각 문자에서 하나 또는 두 개의 레코드가 있습니까? –
@DavidThomas : HTML의 알파벳순 데이터로 이름을 업데이트했습니다. 이것이 내가 작업하고있는 구조입니다. –