Question

如果我从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/

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

Answer 1

你可以使用像这样的方法

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

Answer 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/

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

不知道那里的片段是否有任何错误，因为我只是把它搞砸了。希望你明白了。抓住每个段落标记的第一个字母并放入一个字符串。循环遍历每个锚标记，获取文本，并查看它是否出现在我们创建的字符串中。如果没有，请用span替换它，这样用户就无法点击它并将其着色为灰色。如果你真的只想要锚标记为灰色，请更改上面的内容并对其应用一个类（即：$('a').addClass(...)）。

也许值得注意的是那里有JavaScript / LINQ脚本（即做'不包含'或'where'子句），但使用它们可能会导致性能下降。

Jquery过滤器结果灰显了未使用的字母A-Z

3 个答案: