如何在JavaScript中为列表元素设置焦点？点击显示更多聚焦新增首元素

我来帮你搞定这个焦点定位的问题，先梳理下你的代码里的几个关键问题，然后给出修正方案：

问题分析 #

• 初始隐藏逻辑错误：你用了$('ul li:gt(6)').hide()，jQuery的:gt()选择器是选取索引大于指定值的元素（索引从0开始），这会导致初始显示前7个元素（索引0-6），而你想要的是初始显示5个，应该改成:gt(4)来隐藏索引5及以后的元素。
• li元素默认不可聚焦：HTML中的<li>标签默认不具备可聚焦特性，需要给它们添加tabindex属性（比如tabindex="-1"），这样才能通过JavaScript让它获得焦点，同时不会干扰正常的Tab键导航。
• 焦点定位目标错误：你当前是让最后一个可见元素聚焦，但需求是让新增片区的第一个元素获得焦点，所以需要先获取要显示的分片元素集合，再定位到这个集合的第一个元素。

修正后的完整代码 #

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // 初始隐藏索引5及以后的元素，只显示前5个
  $('ul li:gt(4)').hide();
  $('#showMore').click(function() {
    // 获取要显示的前5个隐藏元素，保存为变量
    const $showItems = $('#payment li:hidden').slice(0, 5);
    $showItems.css("display", "list-item");
    
    // 让新增片区的第一个元素获得焦点
    $showItems.first().focus();

    // 可以保留你的高亮代码，验证元素选择是否正确
    $('#payment li:visible:last').css({"background" : "red"}); 
  }); 
});
</script>

<title>Page Title</title>
</head>
<body>
<ul id="payment">
  <!-- 给每个li添加tabindex="-1"，让它们可以被JS聚焦 -->
  <li tabindex="-1">xyz</li>
  <li tabindex="-1">xyz</li>
  <li tabindex="-1">xyz</li>
  <li tabindex="-1">xyz</li>
  <li tabindex="-1">xyz</li>
  <li tabindex="-1">xyz</li>
  <li tabindex="-1">xyz</li>
  <li tabindex="-1">xyz</li>
  <!-- 可以添加更多li测试分片效果 -->
  <li tabindex="-1">xyz</li>
  <li tabindex="-1">xyz</li>
  <li tabindex="-1">xyz</li>
</ul>

<!-- 修正语义：showMore不应该是li，改成div更合适 -->
<div id="showMore">
  <a href="javascript:;">Show More</a>
</div>  
</body>
</html>

关键修改说明 #

1. 调整初始隐藏规则：把$('ul li:gt(6)').hide()改成$('ul li:gt(4)').hide()，确保初始只显示前5个元素。
2. 添加tabindex属性：给所有<li>添加tabindex="-1"，赋予它们可聚焦能力。
3. 定位新增片区的第一个元素：先把要显示的分片元素保存为变量$showItems，然后用$showItems.first().focus()让这个分片的第一个元素获得焦点，完美匹配你需要的第6、11、16个等元素的聚焦需求。
4. 修正语义化问题：把原来的<li id="showMore">改成<div id="showMore">，因为li必须是ul或ol的子元素，这样更符合HTML规范。

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