如何获取元素的第n个同级元素？实现网格焦点上下移动

当然有办法处理这种场景，核心思路是通过子元素索引计算来定位目标元素，完全避开依赖位置选择器的限制，步骤如下：

1. 获取子元素列表与当前元素索引
   先把网格容器的所有子元素（图片）转成数组，再找到当前聚焦元素在数组中的位置：

   // 当前聚焦元素
   const currentEl = document.activeElement;
   // 网格容器（当前元素的父节点）
   const gridContainer = currentEl.parentNode;
   // 转成数组方便操作
   const gridItems = Array.from(gridContainer.children);
   // 获取当前元素在列表中的索引
   const currentIndex = gridItems.indexOf(currentEl);
   

2. 从组件属性取列数并计算目标索引
   从Web组件的属性中读取预设的列数n，然后直接通过索引偏移计算上下元素的位置：

   • 正上方元素索引：currentIndex - n
   • 正下方元素索引：currentIndex + n

3. 验证索引合法性并转移焦点
   确保计算后的索引在合法范围内（不小于0，且不超过子元素总数），避免越界报错：

   // 从组件属性获取列数（假设属性名为column-count）
   const columnCount = parseInt(this.getAttribute('column-count'), 10);
   
   // 处理向上快捷键（比如ArrowUp）
   const upperIndex = currentIndex - columnCount;
   if (upperIndex >= 0) {
     gridItems[upperIndex].focus();
   }
   
   // 处理向下快捷键（比如ArrowDown）
   const lowerIndex = currentIndex + columnCount;
   if (lowerIndex < gridItems.length) {
     gridItems[lowerIndex].focus();
   }
   

4. 绑定快捷键事件（Web组件场景）
   在组件的connectedCallback钩子中绑定键盘事件，确保只有网格内元素聚焦时才触发逻辑：

   connectedCallback() {
     this.addEventListener('keydown', this.handleKeydown.bind(this));
   }
   
   handleKeydown(e) {
     const currentEl = document.activeElement;
     // 只处理网格容器内的元素
     if (!this.contains(currentEl)) return;
   
     const gridItems = Array.from(this.children);
     const currentIndex = gridItems.indexOf(currentEl);
     const columnCount = parseInt(this.getAttribute('column-count'), 10);
   
     switch(e.key) {
       case 'ArrowUp':
         e.preventDefault(); // 阻止页面默认滚动行为
         const upperIndex = currentIndex - columnCount;
         if (upperIndex >= 0) gridItems[upperIndex].focus();
         break;
       case 'ArrowDown':
         e.preventDefault();
         const lowerIndex = currentIndex + columnCount;
         if (lowerIndex < gridItems.length) gridItems[lowerIndex].focus();
         break;
     }
   }
   

这种方法完全不依赖元素的位置选择器，仅通过数组索引计算就能精准定位上下同级元素，完美适配列数可变、行数未知的网格场景。

内容的提问来源于stack exchange，提问作者Chris J. Zähller