如何通过上下方向按键为<li>标签逐一添加active类

存在的问题 #

• 无初始状态兜底：页面加载完成后默认没有<li>带active类，第一次按下方向键时$currentParent为空对象，无法计算出下一个目标元素，功能无响应。
• 空值访问错误：触发左右键逻辑时，没有判断$currentParent是否存在，直接访问$currentParent[0].firstElementChild会抛出JS异常，阻塞后续代码运行。
• 选择器写法不严谨：移除active类的选择器多了不必要的末尾空格，$('div[data-tree-model] li ')的空格会匹配所有li的后代元素，虽然不影响核心逻辑但存在潜在隐患。

调整后的代码 #

// 页面加载完成后初始化激活状态，解决初始无active的问题
$(function() {
  const $allLi = $('div[data-tree-model] li');
  // 仅当不存在已激活li时默认选中第一个
  if ($allLi.length > 0 && !$('div[data-tree-model] li.active').length) {
    $allLi.eq(0).addClass('active');
  }

  $(window).keyup(function(e) {
    console.log("Key Code: ", e.keyCode);
    const $currentParent = $('div[data-tree-model] li.active');
    // 空值判断，不存在当前激活元素直接终止逻辑避免报错
    if (!$currentParent.length) return;
    
    let $next;
    if (e.keyCode === 39 || e.keyCode === 37) {
      $currentParent[0].firstElementChild.click();
    } else if (e.keyCode == 38) {
      $next = $currentParent.prev('li');
      // 可选逻辑：导航到第一个后继续按上键跳转到最后一个，不需要可删除
      if (!$next.length) {
        $next = $('div[data-tree-model] li').last();
      }
    } else if (e.keyCode == 40) {
      $next = $currentParent.next('li');
      // 可选逻辑：导航到最后一个后继续按下键跳转到第一个，不需要可删除
      if (!$next.length) {
        $next = $('div[data-tree-model] li').first();
      }
    }

    if ($next && $next.length > 0) {
      $('div[data-tree-model] li').removeClass('active');
      $next.addClass('active');
    }
  });
})

补充说明 #

如果你的<li>是嵌套层级的树形结构，prev()/next()仅能匹配同级元素，需要跨层级导航的话可以将所有<li>存入数组，通过下标移动来实现全列表的上下导航。

内容的提问来源于stack exchange，提问作者PRAFUL KUMAR