jQuery selector for a specific li

Question

I have the following markup

<div id="search-query-autocomplete">
  <ul id="autocomplete-results">
    <li class="auto-li">blue</li>
  </ul>
</div>

and want to add a class to the first auto-li when the user keys down.

I have the following javascript:

document.onkeydown = checkKey;
 function checkKey(e){
 e = e || window.event;

 if(e.keyCode=='40')
 {
   $('#autocomplete-results li:nth-child(0)').text('not working');
   console.log('here is 40'); //code
 }
}

But it's not working - what do I need to change?

thx in advance

Answer 1

The :nth-child pseudo-class starts at index 1 not 0

The nth child pseudo-class won't actually help in selecting the first .auto-li, you can use :first, .eq(0) or :eq(0) to filter the selection to just the first .auto-li

$('#autocomplete-results li.auto-li').eq(0).text('working');