3

如果我从一个包含 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/

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

4

3 回答 3

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数字场景，但你应该能够处理它）

于 2012-12-19T02:20:52.900 回答
2 
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/

于 2012-12-19T02:21:01.630 回答
0

一种快速（不是最有效）的方式，就像......

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>');
  }
});

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

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

于 2012-12-19T02:19:14.423 回答