按第一個字母對列表項進行排序

Question

我正在嘗試按第一個字母對列表項進行排序。我正在過濾.list-title div，然後顯示包含所有內容的.list-item。問題是，我直接在過濾器方法上使用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包含一切else.So，當你告訴.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，並使用選擇的時候，你原來的代碼，你在類名選擇的前錯過.小心