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

更清楚地显示联系人列表上第一次出现的信件？

1 个答案: