Переход по элементам списка .next() jquery

389

25 февраля 2017, 06:16

Есть код:

if (e.which == 40) 
{
   $(".list-ul").next(".list-li").focus();
   element.val($(".list-li").val());
}

Подразумевается переход по списку

<ul class = "list-ul">
  <li class = "list-li"></li>
   ....
  <li class = "list-li"></li>
</ul>

но что то не работает. Как правильно?

Answer 1

У вас путаница, потому-что вам и ul надо задействовать, и li сфокусированный, а все должно быть четко:

$(window).keydown(function(e) { 
  if (e.which == 40) { 
    //проверяем выбрано ли что-либо 
    if($(".list-li:focus").length!==0){ 
        //если выбрано, выбираем следующий элемент 
        $(".list-li:focus").next(".list-li").focus(); 
    }else{ 
        //если не выбрано, выбираем первый элемент  
        $(".list-ul .list-li").eq(0).focus(); 
    } 
    $('#element').val($(".list-li:focus").text()) 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="list-ul"> 
  <li class="list-li" tabindex="1">1</li> 
  <li class="list-li" tabindex="2">2</li> 
  <li class="list-li" tabindex="3">3</li> 
</ul> 
<input id=element>