2017-01-29 8 views
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 전용 솔루션을 사용해 보았지만 작동하지 못했습니다.

+1

(익명으로) 연락처와 약간 큰 세트)? 'A', 'B'및 'C'의 각 문자에서 하나 또는 두 개의 레코드가 있습니까? –

+0

@DavidThomas : HTML의 알파벳순 데이터로 이름을 업데이트했습니다. 이것이 내가 작업하고있는 구조입니다. –

답변

0

이 HTML 구조를 사용하여 CSS만으로는 이것을 달성 할 수 없다고 생각합니다.

첫 번째 문자가 같은 연락처를 div 블록으로 그룹화하면 가능합니다. 우리가 재현 할 수있는 HTML의 충분한 게시와 함께 작동 할 수

<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