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 スクリプト (つまり、'not contains' または 'where' 句を実行するスクリプト) が存在することに注意してください。ただし、それらを使用すると、パフォーマンスが低下する可能性があります。

于 2012-12-19T02:19:14.423 に答える