keypressのliにcssクラスを追加するには

Question

私は全てのliに1文字のリストを並べ替えています。ユーザーがキーボード上の任意の文字を押した場合、私は自分のページの対応するliにcssクラスを追加したかったのです。ユーザがキーボードの上にAを押すと、私はそれが

 $(document).keypress(function(e){ 
     var x = e.which; 
     if((x >= 65 && x <= 90)||(x >=97 && x <= 122)||(x >=48 && x <= 57)) { 
     checkfirst(x); 

     } 
     }); 
    // pick list item with the text content of the value passed 
    function checkfirst(x){ 
     var y = $('.list').find('li'); 
     // code will go here 
     //am trying to find the li with text equal to the argument passed 
    } 

Answer 1

使用しないでください開始どのようにこれがあるとして、その内容を持っているリチウムを見つけ、それ

<div> 
     <ul class ='list'> 
     <li>a</li> 
     <li>b</li> 
     <li>c</li> 
     ... 
     <li>z</li> 
     </ul> 
    </div> 

にCSSクラスを追加しますkeypress、代わりにkeyupを使用してください。詳細はKey event differencesを参照してください。

ドキュメント上で押された文字がメニュー行の内容に対応するときにアクティブなクラスを追加する関数を作成しました。

$(document).on('keyup', function(e) { 
 
    if (e.shiftKey == false && e.ctrlKey == false) { 
 
    // get the character typed 
 
    var charTyped = String.fromCharCode(e.which); 
 

 
    // remove style active from all li with no child and add this to the elements with the 
 
    // content matching the character typed 
 
    $('div ul.list li:not(:has(*))').removeClass('active').filter(function() { 
 
     return this.textContent.toUpperCase() == charTyped; 
 
    }).addClass('active'); 
 
    } 
 
});

.list { 
 
    font-family: Verdana, sans-serif; 
 
    font-size: 12px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.list li { 
 
    background: yellowgreen; 
 
    display: block; 
 
    width: 150px; 
 
    height: 30px; 
 
    margin: 2px 0; 
 
    font-size: large; 
 
} 
 
.active { 
 
    background-color: #54BAE2 !important; 
 
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<div> 
 
    <ul class ='list'> 
 
     <li>a</li> 
 
     <li>b</li> 
 
     <li>c</li> 
 
     ... 
 
     <li>z</li> 
 
    </ul> 
 
</div>