更清晰的方式顯示聯繫人列表中第一次出現的字母？

我有一個工作的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的解決方案，但無法使這些工作成功。

來源

2017-01-29 Dan L

你可以發佈你足夠的HTML，我們可以複製的，並與工作，稍大鑲有（匿名）聯繫方式）？例如，來自每個字母「A」，「B」和「C」的一個或兩個記錄？ –

@DavidThomas：我用虛擬字母數據更新了名稱的HTML。這是我正在與之合作的結構。 –

使用這個html結構我不認爲用CSS來實現這一點是不可能的。

如果將具有相同首字母的聯繫人分組爲div塊，則可以。

<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

來源

2017-01-29 15:39:48 Jackson

更清晰的方式顯示聯繫人列表中第一次出現的字母？

回答

相關問題