Сортировка элементов списка по первой букве

Question

Я пытаюсь сортировать элементы списка по их первой букве. Я фильтрую div.list-title и затем показываю .list-элемент, который содержит все содержимое. Проблема в том, что я использую метод show непосредственно на методе фильтра, который не вызывает ничего, поскольку ему нужно показать .list-item (parent) для возвращаемых результатов. Я не уверен, как переписать это любым другим способом. Как я могу показать элемент списка для каждого возвращаемого элемента?

$(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 на первом, который содержит все, 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, а также быть осторожными при использовании переключателя, в исходном коде вы пропустили . перед селекторов имени класса