jQuery如何将第一个按钮集中在lidown键上

Question

So I have a list of li rows that each contain buttons. I have set it up so I can scroll down the li rows using up and down keys and the buttons using left and right keys. But I cant seem to figure out how to make it focus the first button each time a new row is selected. So for example, I scroll down the rows, each time i scroll to a new row, the first button in that row should have been focused.

I added $("button").first().focus(); each time down is pressed, but it only focuses the first button of all the buttons and not the first of the current row.

Here is the complete code im using jsbin

button:focus { background:yellow; }
li.selected {background:red}
ul { list-style-type: none; }

<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li>
<li><button>1</button><button>2</button><button>3</button><button>4</button></li> 


    let el=$('button');
    for(var i = 1; i<=el.length; i++){
      el.eq(i-1).attr('tabindex',i);
    }   

    var li = $('li');
    var liSelected;
    $(window).keydown(function(e){

        if(e.which === 40){
            if(liSelected){
                liSelected.removeClass('selected');
                next = liSelected.next();

        //Focus button 
        $("button").first().focus();

                if(next.length > 0){
                    liSelected = next.addClass('selected');
                }else{
                    liSelected = li.eq(0).addClass('selected');
                }
            }else{
                liSelected = li.eq(0).addClass('selected');
            }
        }else if(e.which === 38){
            if(liSelected){
                liSelected.removeClass('selected');
                next = liSelected.prev();
                if(next.length > 0){

                    liSelected = next.addClass('selected');
                }else{
                    liSelected = li.last().addClass('selected');
                }
            }else{
                liSelected = li.last().addClass('selected');
            }
        }
    });

    $('button').on('keydown', function(event) {
      let currentTabIndex = $(this).attr('tabindex');
      let el = $('button');


    //Focus on categories if at top and up is pressed

      switch (event.which) {
        case 37:
          currentTabIndex = parseInt(currentTabIndex) - 1;
          if (currentTabIndex == 0) {
            $("[tabindex=" + el.length + "]").focus()
          } else {
            $("[tabindex=" + currentTabIndex + "]").focus()
          }
          break;

        case 39:
          currentTabIndex = parseInt(currentTabIndex) + 1;
          if (currentTabIndex == el.length+1) {
            $("[tabindex=" + 1 + "]").focus()
          } else {
          $("[tabindex=" + currentTabIndex + "]").focus()
          }
          break;
      }

    });

Answer 1

Assuming that you want to select the first button everyTime user press up/down, here is the code

$(window).keydown(function(e){
    var callabackFunction = function (){

  if(liSelected && liSelected.find('button')[0]){
    liSelected.find('button')[0].focus();
  }
    }
    if(e.which === 40){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.next();


            if(next.length > 0){
                liSelected = next.addClass('selected');
            }else{
                liSelected = li.eq(0).addClass('selected');
            }
        }else{
            liSelected = li.eq(0).addClass('selected');
        }
      callabackFunction();
    }else if(e.which === 38){
        if(liSelected){
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0){

                liSelected = next.addClass('selected');
            }else{
                liSelected = li.last().addClass('selected');
            }
        }else{
            liSelected = li.last().addClass('selected');
        }
      callabackFunction();
    }



});

Edit : - edited the code , will work. still if you want to select the current row , you need to write the logic for it .