javascript - 按首字母排序列表项

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 fiddle :

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里面，并且在使用选择器的时候也要小心，在你原来的代码中你错过了类名前面的.选择器