Javascript 如何根据文本值构建简单的jQuery字典字母表过滤器？

我在创建它方面没有问题，我的问题是：当我尝试检测空返回时。我准备好了JSFIDLE进行检查，单击“B”查找我要查找的内容，但方法很可靠

基本上我想用聪明的方法检查结果是否为空

jQuery:

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
    var takeLetter = $(this).text();;
    filters.parent().hide();

    filters.each(function(i) {
        var compareFirstLetter = $(this).text().substr(0,1);
        if ( compareFirstLetter ==  takeLetter ) {
            $(this).parent().fadeIn(222);
        }

        //problem on detecting empty one. Press 'B' for example.
        //i can reach manually but this way is useless
        if (takeLetter ==='B') {console.log('There is no result.');}
    });

});

<ul class="alphabet">
    <li><a>A</a></li>
    <li><a>B</a></li>
    <li><a>C</a></li>
    <li><a>...</a></li>
</ul>

<ul class="medical_dictionary">
      <li><strong>Abdominoplasti</strong>: Lorem ipsum.</li>
      <li><strong>Absans</strong>: Lorem ipsum.</li>
      <li><strong>Abse</strong>: Lorem ipsum.</li>
      <li><strong>....</strong>: Lorem ipsum.</li>
</ul>

​

html:

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
    var takeLetter = $(this).text();;
    filters.parent().hide();

    filters.each(function(i) {
        var compareFirstLetter = $(this).text().substr(0,1);
        if ( compareFirstLetter ==  takeLetter ) {
            $(this).parent().fadeIn(222);
        }

        //problem on detecting empty one. Press 'B' for example.
        //i can reach manually but this way is useless
        if (takeLetter ==='B') {console.log('There is no result.');}
    });

});

<ul class="alphabet">
    <li><a>A</a></li>
    <li><a>B</a></li>
    <li><a>C</a></li>
    <li><a>...</a></li>
</ul>

<ul class="medical_dictionary">
      <li><strong>Abdominoplasti</strong>: Lorem ipsum.</li>
      <li><strong>Absans</strong>: Lorem ipsum.</li>
      <li><strong>Abse</strong>: Lorem ipsum.</li>
      <li><strong>....</strong>: Lorem ipsum.</li>
</ul>

A
B
C



腹部成形术：同侧腹部
Absans：Lorem ipsum
Abse：Lorem ipsum
…：Lorem ipsum

尝试以下操作：

请注意，我添加了新变量

found

，每当单击新字母表时，该变量设置为

false

。一旦发现字典条目与字母匹配，此is变量即设置为true

现在，在循环后检查相同的变量，以检查找到的相关条目，如果没有找到条目，则不显示任何结果

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
    var takeLetter = $(this).text();
    var found = false;
    filters.parent().hide();

    filters.each(function(i) {
        var compareFirstLetter = $(this).text().substr(0,1);
        if ( compareFirstLetter ==  takeLetter ) {
            $(this).parent().fadeIn(222);
            found = true;
        }
    });
    if (!found) {console.log('There is no result.');}
});

---

您的警报将始终在到达

过滤器的第二个元素时触发。那么：

triggers.click(function() {
    var takeLetter = $(this).text(), result = 0;
    filters.parent().hide();

    filters.each(function(i) {
        if ( RegExp('^'+takeLetter).test($(this).text()) ) {
            result += 1;
            $(this).parent().fadeIn(222);
        }
    });
    if (result<1) {alert('There is no result.');}
});

触发器。单击（函数（）{
var takeLetter=$（this）.text（），result=0；
filters.parent（）.hide（）；
过滤器。每个（功能（i）{
if（RegExp（'^'+takeLetter）.test（$（this.text（）））{
结果+=1；
$（this.parent（）.fadeIn（222）；
}
});
如果（result我更改了您的代码，在每个
strong
元素中添加了一个类似
.letter-a
的类，那么您可以只计算/隐藏/显示这些元素。我认为这更简单一些：

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

filters.each(function(){
    $(this).addClass('letter-' + $(this).text().substr(0,1));
});

triggers.click(function() {
    var takeLetter = $(this).text();
    filters.parent().hide();

    var matches = filters.filter('.letter-' + takeLetter);
    matches.parent().fadeIn(222);

    if (matches.length == 0) {
        alert('There is no result for ' + takeLetter);
    };

});
​

看小提琴：
你需要一种计数器

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
var takeLetter = $(this).text();;
var matches = filters.length;
filters.parent().hide();

filters.each(function(i) {
    var compareFirstLetter = $(this).text().substr(0,1);
    if ( compareFirstLetter ==  takeLetter ) {
        $(this).parent().fadeIn(222);
    }

    if (takeLetter != compareFirstLetter)
        matches--;
});

if (matches == 0)
    console.log('There is no result.');
});

我重写了它（只有JavaScript，没有HTML），如下所示：

我所做的是首先根据大写字母过滤条目，然后如果没有找到元素，则从函数返回

但如果找到了元素，我只对它们进行迭代以显示它们

var triggers = $('ul.alphabet li a');
var filters = $('ul.medical_dictionary li strong');

triggers.click(function() {
    var takeLetter = $(this).text();
    filters.parent().hide();

    var availableResults = filters.filter(function (f) {
        return $(this).text()[0] === takeLetter;
    });

    if (!availableResults.length) {
        console.log('There is no result.');
        return;
    }

    availableResults.each(function(i) {
        $(this).parent().fadeIn(222);
    });
});

​