Jquery过滤结果灰色未使用的字母A-Z答案

【问题标题】：Jquery filter results grey out unused letters A-ZJquery过滤结果灰色未使用的字母A-Z
【发布时间】：2012-12-19 01:58:55
【问题描述】：

如果我从一个包含 10 个名称的 mySQL 数据库中获得一个记录集，我可以使用 jquery 按首字母过滤这些记录。但是，如果我在页面上为字母表中的每个字母都有一个链接，并且想将那些没有任何“结果”的链接设为灰色，我该怎么做？

这是我目前过滤结果的方式：

$(document).ready(function() {
    function filterResults(letter){
        $('p').hide();
        $('p').filter(function() {
            return $(this).text().charAt(0).toUpperCase() === letter;
        }).show();
    };
    filterResults('A');
    $('a').on('click',function(){
        var letter = $(this).html();            
        filterResults(letter);        
    });
});

示例的小提琴在这里： http://jsfiddle.net/livinzlife/8UE6m/

我希望所有下落不明的字母都是灰色的。我不知道如何选择那些下落不明的。

【问题讨论】：

标签： jquery filter

【解决方案1】：

var $p = $('p');
$('a').addClass(function(){
    var a = this.textContent;
    return $p.filter(function(){
       return this.textContent.charAt(0) === a
    }).length ? 'green' : 'grey';
});

http://jsfiddle.net/zLxKU/

【讨论】：

【解决方案2】：

你可以使用这样的方法

function showSupported(){
    // get the first letter of each p element in an array
    var supported = $('p').hide().map(function() {
        return $(this).text().charAt(0).toUpperCase();
    }).get(); 

    // make array unique;
    supported = $.grep(supported, function(v, k) {
        return $.inArray(v, supported) === k;
    });

    // find all a elements whose letter is not in the supported array
    $('a').filter(function(){
        return $.inArray($(this).text(), supported) === -1;
    }).addClass('grey'); // adding a class that makes them grey or whatever..
}

http://jsfiddle.net/gaby/8UE6m/1/的演示

（它不能处理 0-9 数字场景，但你应该能够处理它）

【讨论】：

【解决方案3】：

一种快速（不是最有效）的方式，类似于...

var letters = "";
//Change the selector below to be more specific
//Go through <p>'s and get first letter
$('p').each(function() { 
var aText = $(this).text().toUpperCase();
  //Guard against empty
  letters += aText ? aText.substring(0,1) : '';
});
//Loop through the A's
$('a').each(function() {
  if(letters.indexOf($(this).text().toUpperCase()) < 1) {
     //One way is to replace the anchor tag with a span, which can't be clicked
     $(this).replaceWith('<span style="color:grey;">' + $(this).text() + '</span>');
  }
});

不确定那里的 sn-p 是否有任何错误，因为我只是把它敲出来了。希望你明白这一点。抓取每个段落标签的第一个字母并放入一个字符串中。循环遍历每个锚标记，获取文本，并查看它是否出现在我们创建的字符串中。如果不是，请将其替换为跨度，这样用户就无法单击它并将其涂成灰色。如果您真的希望锚标记为灰色，请更改上述内容并为其应用一个类或其他内容（即：$('a').addClass(...)）。

也许值得注意的是，那里有 JavaScript/LINQ 脚本（即执行 'not contains' 或 'where' 子句），但使用它们可能会导致性能损失。

【讨论】：