我希望有人可以帮助解决我的问题。
我有这样的城市名单:
<ul class="cities">
<li>New York</li>
<li>New York 2</li>
<li>Chicago</li>
<li>Chicago 2</li>
<li>Etc.</li>
</ul>
我想选择适当的城市,以键盘上按下的字符开头。例如,如果我按“N”,它将选择“纽约”,如果我再按一次,那么它将选择“纽约2”,依此类推。
到目前为止,我有jQuery代码:
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');
}
});
});
斗争是它正在选择具有压制字符的所有元素。 :(
P.S。通过选择我的意思是将“活动”类添加到li元素。
答案 0 :(得分:0)
为了更有效地实现这一目标,您可以在filter()
中使用正则表达式,该表达式仅返回其第一个字符与按下的键匹配的元素。试试这个:
$(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');
});
&#13;
.active { color: #C00; }
&#13;
<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>
&#13;