Question

我正在尝试按照第一个字母对列表项进行排序。我正在通过.list-title div进行过滤，然后显示包含所有内容的.list-item。问题是，我直接在filter方法上使用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小提琴：

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

按首字母排序列表项目

1 个答案: