Wählen Sie ein bestimmtes li-Element, das mit dem ausgewählten Zeichen beginnt

Question

Ich hoffe, jemand kann helfen, mein Problem zu lösen.

Ich habe Liste der Städte wie folgt aus:

<ul class="cities"> 
    <li>New York</li> 
    <li>New York 2</li> 
    <li>Chicago</li> 
    <li>Chicago 2</li> 
    <li>Etc.</li> 
</ul> 

ich geeignete Stadt auswählen möchten, die mit gedrückter Zeichen auf der Tastatur beginnt. Wenn ich zum Beispiel 'N' drücke, wird 'New York' gewählt, wenn ich noch einmal drücke, wird 'New York 2' ausgewählt und so weiter.

Bisher habe ich jQuery-Code:

jQuery(document).keypress(function(event){ 
    // Deselect all others 
    $(".cities li").each(function() { 
     if($(this).hasClass('active')) { 
      $(this).removeClass('active'); 
     } 
    }); 

    $(".cities li").each(function() { 
     var li_text = $(this).text(); 

     // check if pressed character match first li element character and select it by adding 'active' class 
     if(li_text.charAt(0).toLowerCase() == String.fromCharCode(event.which).toLowerCase()) 
     { 
      $(this).addClass('active'); 

     } 
    }); 
}); 

Der Kampf ist, dass es alle Elemente mit gedrückten Zeichen auswählen. :(

PS Durch die Auswahl ich meine ‚aktiv‘ Klasse li Element hinzufügen.

Answer 1

Um dies zu erreichen desto effektiver können Sie einen regulären Ausdruck innerhalb filter() verwenden, welche die Elemente nur zurückgibt, deren erste Zeichen entspricht der gedrückten Taste. versuchen Sie folgendes:

$(document).on('keypress', function(e) { 
 
    var letter = String.fromCharCode(e.which).toLowerCase(); 
 
    var re = new RegExp('^' + letter, 'i'); 
 

 
    $li = $('.cities li').removeClass('active').filter(function() { 
 
    return re.test($(this).text().trim()); 
 
    }).addClass('active'); 
 
});

.active { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="cities"> 
 
    <li>New York</li> 
 
    <li>New York 2</li> 
 
    <li>Chicago</li> 
 
    <li>Chicago 2</li> 
 
    <li>Etc.</li> 
 
</ul>