javascript - 按首字母过滤列表项

Question

我有一个带有列表项的 ul。我正在尝试过滤掉第一个字母显示的项目。

过滤列表：

<ul class="myFilters">
<li data-type="A">A</li>
<li data-type="B">B</li>
<li>etc...</li>
</ul>

名单

<ul class="myFilterItems">
<li>Apple</li>
<li>Banana</li>
<li>etc...</li>
</ul>

理想情况下，单击liin.myFilters将仅显示.myFilterItems以该字母开头的项目。

Answer 1

你可以尝试一些类似的东西

$('.myFilters li').click(function(){
   var v = $(this).text()[0]
   $('.myFilterItems li').hide().filter(function(){
      return $(this).text().toUpperCase()[0] == v;
   }).show()
})

Answer 2

就像是...

$('.myFilters li').on("click", function() {
  var letter = $(this).text()[0];
  $('.myFilterItems li').each(function() {
    if ($(this).text()[0] == letter) {
      $(this).show();
    } else {
      $(this).hide();
    }

  });
});

您可能想要处理区分大小写（s 或 S）等，但这应该有效......