更清晰的方式来显示联系人列表中第一次出现的字母？

Question

我有一个有效的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的解决方案，但无法使其正常工作。

Answer 1

使用这种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