选择以所选字符开头的特定li元素

时间:2017-06-11 09:39:17

标签: javascript jquery html

我希望有人可以帮助解决我的问题。

我有这样的城市名单:

<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元素。

1 个答案:

答案 0 :(得分:0)

为了更有效地实现这一目标,您可以在filter()中使用正则表达式,该表达式仅返回其第一个字符与按下的键匹配的元素。试试这个:

&#13;
&#13;
$(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;
&#13;
&#13;