需要显示所有选项是使用 jQuery 的基于字母的导航

Question

我将应用基于字母的导航来过滤表格和列表的内容。单击其中一个字母时，过滤列表/表格以仅显示列表/表格中以该字母开头的项目。

但我面临的问题是“所有列表”。我还需要显示“全部”链接，谁能帮我添加“全部”链接..

$(function () {
    var _alphabets = $('.alphabet > a');
    var _contentRows = $('#countries-table tbody tr');

    _alphabets.click(function () {      
        var _letter = $(this), _text = $(this).text(), _count = 0;

        _alphabets.removeClass("active");
        _letter.addClass("active");

        _contentRows.hide();
        _contentRows.each(function (i) {
            var _cellText = $(this).children('td').eq(0).text();
            if (RegExp('^' + _text).test(_cellText)) {
                _count += 1;
                $(this).fadeIn(400);
            }
        });                   
    });
});

这里是Demo 链接...

谢谢...

Answer 1

仅在文本不等于All时应用Regex

$(function () {
    var _alphabets = $('.alphabet > a');
    var _contentRows = $('#countries-table tbody tr');

    _alphabets.click(function () {
        var _letter = $(this),
            _text = $(this).text(),
            _count = 0;

        _alphabets.removeClass("active");
        _letter.addClass("active");

        _contentRows.hide();
        _contentRows.each(function (i) {
            var _cellText = $(this).children('td').eq(0).text();
            if (_text === 'All') {
                _count += 1;
                $(this).fadeIn(400);
            } else {
                if (RegExp('^' + _text).test(_cellText)) {
                    _count += 1;
                    $(this).fadeIn(400);
                }
            }
        });
    });
});

Check Fiddle

Answer 2

只显示所有tr onclick()

$('a').first().click(function(){
$('#countries-table tbody tr').fadeIn(400);
});

link to jsfiddle

Answer 3

[更新]

一个简单的

只需添加这一行：

if(_text == 'All') _text = '.';

DEMO

编辑：

根据你的意愿，这个代码可以让你淡化没有单词的字母：

_alphabets.not(':first').css('opacity','0.5');
_contentRows.each(function(){
    var beg = $(this).children('td:first').text().trim()[0];
    $('.alphabet a:eq('+(beg.charCodeAt(0)-64)+')').css('opacity','1.0');
});

DEMO

说明：我在这里所做的是获取所有 trs 中每个第一个 td 的第一个字母，然后将其转换为 ascii (A=65 ..) 然后减去 64，以便第一个索引从 1 (A) 开始，依此类推（因为索引 0 代表“全部”）

注意：您根本不必使用正则表达式，因为您只是比较第一个字符，您可以通过取消正则表达式来提高效率。