jQuery / HTML - 应用字母过滤器时添加无结果消息

Question

已调整上一个问题 (Need to show All option is Letter-based Navigation using jQuery) 中的 jQuery 代码来创建一个 A-Z 过滤器，如下所示：

HTML：

<div class="az-controls"> <a href="#" class="active">All</a> <a href="#">A</a> <a href="#">B</a> <a href="#">C</a> <a href="#">D</a> <a href="#">E</a> <a href="#">F</a> <a href="#">G</a> <a href="#">H</a> <a href="#">I</a> <a href="#">J</a> <a href="#">K</a> <a href="#">L</a> <a href="#">M</a> <a href="#">N</a> <a href="#">O</a> <a href="#">P</a> <a href="#">Q</a> <a href="#">R</a> <a href="#">S</a> <a href="#">T</a> <a href="#">U</a> <a href="#">V</a> <a href="#">W</a> <a href="#">X</a> <a href="#">Y</a> <a  href="#">Z</a> </div>

<ul id="inpageUL">
<li><a href="#">Apples</a></li>
<li><a href="#">Bananas</a></li>
<li><a href="#">Carrots</a></li>
<li><a href="#">Corn</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Easels</a></li>
<li><a href="#">Fish</a></li>
<li><a href="#">Greens</a></li>
<li><a href="#">Hectares</a></li>
<li><a href="#">Hemp</a></li>
<li><a href="#">Igloos</a></li>
<li><a href="#">Islands</a></li>
<li><a href="#">Jams</a></li>
<li><a href="#">Limes</a></li>
<li><a href="#">Lemons</a></li>
<li><a href="#">Oranges</a></li>
<li><a href="#">Peaches</a></li>
<li><a href="#">Radishes</a></li>
<li><a href="#">Squid</a></li>
<li><a href="#">Trees</a></li>
<li><a href="#">Weeds</a></li>
</ul>

jQuery:

$(function () {
var _alphabets = $('.az-controls > a');
var _contentRows = $('#inpageUL li');

_alphabets.click(function () {      
    var _letter = $(this), _text = $(this).text(), _count = 0;
    if(_text == 'All') _text = '.';
    _alphabets.removeClass("active");
    _letter.addClass("active");

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

是否可以调整 jQuery 以包含没有结果的字母的条件？即打印一个 li 并带有“这封信没有结果”。

还有第二个相关问题；是否可以加载已过滤特定字母的页面（例如从超链接）？

Answer 1

您可以在ul 中添加额外的li 并根据条件显示/隐藏。 HTML：

<div class="az-controls"> <a href="#" class="active">All</a> <a href="#">A</a> <a href="#">B</a> <a href="#">C</a> <a href="#">D</a> <a href="#">E</a> <a href="#">F</a> <a href="#">G</a> <a href="#">H</a> <a href="#">I</a> <a href="#">J</a> <a href="#">K</a> <a href="#">L</a> <a href="#">M</a> <a href="#">N</a> <a href="#">O</a> <a href="#">P</a> <a href="#">Q</a> <a href="#">R</a> <a href="#">S</a> <a href="#">T</a> <a href="#">U</a> <a href="#">V</a> <a href="#">W</a> <a href="#">X</a> <a href="#">Y</a> <a  href="#">Z</a> </div>
<ul id="inpageUL">
    <li><a href="#">Apples</a></li>
    <li><a href="#">Bananas</a></li>
    <li><a href="#">Carrots</a></li>
    <li><a href="#">Corn</a></li>
    <li><a href="#">Eggs</a></li>
    <li><a href="#">Easels</a></li>
    <li><a href="#">Fish</a></li>
    <li><a href="#">Greens</a></li>
    <li><a href="#">Hectares</a></li>
    <li><a href="#">Hemp</a></li>
    <li><a href="#">Igloos</a></li>
    <li><a href="#">Islands</a></li>
    <li><a href="#">Jams</a></li>
    <li><a href="#">Limes</a></li>
    <li><a href="#">Lemons</a></li>
    <li><a href="#">Oranges</a></li>
    <li><a href="#">Peaches</a></li>
    <li><a href="#">Radishes</a></li>
    <li><a href="#">Squid</a></li>
    <li><a href="#">Trees</a></li>
    <li><a href="#">Weeds</a></li>
    <li class="no-result" style="display: none">No result</li>
</ul>

JQuery:

$(function () {
        var _alphabets = $('.az-controls > a');
        var _contentRows = $('#inpageUL li:not(.no-result)');

        _alphabets.click(function () {
            var _letter = $(this), _text = $(this).text(), _count = 0;
            if(_text == 'All') _text = '.';
            _alphabets.removeClass("active");
            _letter.addClass("active");

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

Answer 2

您可以根据计数设置条件

jQuery(function () {
var _alphabets = $('.az-controls > a');
var _contentRows = $('#inpageUL li');
var _inpageUL = $('#inpageUL'); // SET VARIABLE FOR UL

_alphabets.click(function () {      
    var _letter = $(this), _text = $(this).text(), _count = 0;
    if(_text == 'All') _text = '.';
    _alphabets.removeClass("active");
    _letter.addClass("active");

    if(_inpageUL.find("li.no_result").length > 0) //CHECK CONDITION IF NO RESULT AVAIALBLE
        _inpageUL.find("li.no_result").remove();

    _contentRows.hide();
    _contentRows.each(function (i) {
        var _cellText = $(this).children('a').eq(0).text();
        if (RegExp('^' + _text).test(_cellText)) {
            _count += 1;
            $(this).fadeIn(400);
        }
    });    
    if(_count == 0){ //APPEND NO RESULT
        _inpageUL.append("<li class='no_result'>No result</li>");
    }
});
});