如何从传递到filter（）函数的<li>列表中获取数据内容属性值

Question

我很困惑如何从li标签字母列表中获取数据内容属性值，因此可以进行值比较，并使用.filter（）函数过滤内容。到目前为止，我只能根据列表中不同字母的数量多次打印第一个字母A，但是如何仅一次打印所有字母（fx。A-Z）？

$(function($) {
  var letters = [];
  var $ul = $("<ul></ul>").appendTo(".page-content");

  $("nav.link-list a").each(function(i) {
    var brandTitle = $(this).attr("title");
    itmLetter = brandTitle.trim().substring(0, 1).toUpperCase();
    if (letters.indexOf(itmLetter) < 0) {
      letters.push(itmLetter);
      $ul.append(
        $("<li/>", {
          "class": "AddContent",
          "id": itmLetter,
          "data-content": itmLetter
        })
      );
    }
  }); // end of alphabet list
    
setTimeout ( filter(), 3000);

function filter() {
      $("li.AddContent").each(function(){
            var al = $("li.AddContent").attr("id");
    console.log(al);
       });
    
}
    
});

.AddContent:before {
   content: attr(data-content);
   display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content">
  <h1>Brands</h1>
  <div class="page-content__body"></div>
</div>
<article class="category-list">
    <nav class="link-list">
      <a href="/brands/abus" title="ABUS">ABUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="ACC">ACC</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="BUS">BUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="BKUS">BKUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="KUS">KUS</a>
    </nav>
    <nav class="link-list">
      <a href="/brands/abus" title="SUK">SUK</a>
    </nav>
  </article>

时间？