нажмите горячую клавишу, чтобы пропустить li не работает jquery

Question

У меня есть li договоренность, которая представляет собой онлайн-экзамен.

Если студент щелкнет по случайному li и не знает ответа, он может перейти к следующему вопросу (li), нажав на соответствующем li или просто нажатием цифры 5 на его клавиатуре.

Это код, который я сделал до сих пор.

ПРОБЛЕМА

мне нужно определить текущий открытый ли (фокусированный ввод) и, если нажать клавишу 5 на клавиатуре, перейти к следующему ли и открыть его для работы в нем

	
$("li").on("click",function(){
 $("li").find("input").hide();
$(this).find("input").show().focus();

});


var body = $('body');

    body.keypress( function (e) {
		
    var li =  $(document).find('ul.list li');

    
	
	if ( e.which == 53 ) {
		//alert()
		li.find("input").next().show();
	}
	
	
	
	
});

li input{display:none;}
li{cursor:pointer;border:1px solid red;margin:5px;padding:10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<ul class='list'>

<li>a <input value='' /></li>
<li>b <input value='' /></li>
<li>c <input value='' /></li>
<li>d <input value='' /></li>
<li>e <input value='' /></li>
<li>f <input value='' /></li>

</ul>

Answer 1

Вы можете использовать document.activeElement, чтобы получить активный элемент input. Как только вы получите экземпляр input, используйте closest() для получения li и next() для перехода к следующему li.

$("li").on("click", function() {
  $("li").find("input").hide();
  $(this).find("input").show().focus();

});

$('body').keypress(function(e) {

  if (e.which == 53) {
    e.preventDefault();

    let li, input;
    if (document.activeElement.tagName == "BODY") {
      input = $('li input').first();
    } else {
      li = $(document.activeElement).closest('li');
      input = li.next().find("input");
    }

    input.show();
    input.focus();
  }
});

li input {
  display: none;
}

li {
  cursor: pointer;
  border: 1px solid red;
  margin: 5px;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<ul class='list'>

  <li>a <input value='' /></li>
  <li>b <input value='' /></li>
  <li>c <input value='' /></li>
  <li>d <input value='' /></li>
  <li>e <input value='' /></li>
  <li>f <input value='' /></li>

</ul>