按首字母排序列表项

Question

我正在尝试按第一个字母对列表项进行排序。我正在过滤 .list-title div，然后显示包含所有内容的 .list-item。问题是，我直接在 filter 方法上使用 show 方法，因为它需要为返回的结果显示 .list-item （父级），所以什么都没有显示。我不知道如何以任何其他方式重写它。如何显示每个返回项目的列表项？

$(document).ready(function() {
    function filterResults(letter){
        $('.list-item').hide();
        $('li.list-item .list-title').filter(function() {
            return $(this).text().charAt(0).toUpperCase() === letter;
        }).show();
    };
    filterResults('A');
    $('a').on('click',function(){
        var letter = $(this).text();            
        filterResults(letter);        
    });
});

var $listItem =  $('.list-item')
$('a').addClass(function(){
    var s = this.textContent;
    return $listItem.filter(function(){
       return this.textContent.charAt(0) === s
           }).length ? '' : 'grey';
})

JS 小提琴：

http://jsfiddle.net/2ewgr2mt/2/

Answer 1

您首先隐藏了包含其他所有内容的 .list-item。因此，当您显示 .list-title 时，它将不会显示，因为它的父级 (.list-item) 已隐藏。正确的代码应该是

$(document).ready(function() {
  function filterResults(letter){
    $('.list-item').hide();
    $('.list-item').filter(function() {
        return $(this).find('.list-title').text().charAt(0).toUpperCase() === letter;
    }).show();
  };

  filterResults('A');
  $('a').on('click',function(){
    var letter = $(this).text();      
    filterResults(letter);        
  });

  var $listItem =  $('.list-item')
  $('a').addClass(function(){
    var s = this.textContent;
    return $listItem.filter(function(){
       return this.textContent.charAt(0) === s
           }).length ? '' : 'grey';
  });
});

P/s：记得把所有的东西都放在ready里面，使用选择器的时候也要小心，在你原来的代码中你错过了类名选择器前面的.