Question

我有一个网格，当导航中的最后一个元素具有焦点时，我需要执行一个功能。但是，我很难让我的脚本找到该行中的最后一个元素：

const cells = document.getElementsByClassName('ag-header-row');
[...cells].map(cell => {
  console.log(cells.length-1);
})

标头父标记：

<div class="ag-header-row" role="presentation" style="top: 0px; height: 32px; width: 800px;">

带有导航项标记：

<div class="ag-header-cell ag-header-cell-sortable" role="presentation" col-id="athlete" style="width: 200px; left: 0px;">

当用户箭头指向标题并到达最后一个标题列时，我需要触发一个事件侦听器，该事件侦听器会将焦点设置为下面数据网格主体中的第一个单元格。

Plnkr链接：Link

更新

我添加了一个脚本，该脚本应该在标头单元格上查找focus-visible类，以及标头单元格是按键上的最后一个单元格，并将焦点设置为正文中的第一个单元格在箭头右键上。但是，我收到错误headerCells.addEventListener is not a function。我也不确定我是否正确设置了逻辑以检查最后一个标头单元格和/或focus-visible类。

const headerCells = document.getElementsByClassName('ag-header-cell');
const last_cell = headerCells[headerCells.length-1].attributes[2].value;
const hasFocusVisible = document.querySelector('.ag-header-cell-label').classList.contains('focus-visible');
console.log(hasFocusVisible);
[...headerCells].map(headerCell => {
  console.log(headerCell)
  headerCells.addEventListener("keydown", function(e) {
    if(e.key === "ArrowRight" && hasFocusVisible == true && last_cell) {
      //if last_cell and 'ag-header-cell-label' has 'focus-visible', set focus to first cell in body
      const bodyCell = document.getElementsByClassName('ag-cell')[0];
    }
  })
});

更新的Plnkr链接：Updated link

Answer 1

如果您只需要在特定选择器中找到最后一个元素，请尝试以下操作：

var cells =document.querySelectorAll('.ag-header-row');
var last_cell = cells[cells.length-1];

获取网格标题中的最后一个导航元素

1 个答案: