JavaScript循环列表前后元素定位问题：[i-1]无法自动获取最后一个元素

我明白你的需求啦——你想要实现循环式的前后项定位：当当前项在列表开头时，上一项自动指向最后一个元素；在列表末尾时，下一项自动指向第一个元素。之前的问题出在直接用i-1和i+1的索引方式，当处于边界位置时，索引会超出数组范围，导致拿到undefined。

核心解决方案：用取模运算实现循环索引 #

我们可以通过**取模（%）**来计算循环后的有效索引，确保无论当前项在哪个位置，都能正确拿到循环的前后元素：

• 上一项索引：(i - 1 + 总元素数) % 总元素数 —— 加总元素数是为了避免出现负数索引的情况
• 下一项索引：(i + 1) % 总元素数

修改后的完整代码 #

HTML（注意：修复了重复id的问题，HTML中id必须唯一）

<div class="items">
  <div id="current-item" class="current-div-item div-item"></div>
  <div id="item-1" class="div-item"></div>
  <div id="item-2" class="div-item"></div>
  <div id="item-3" class="div-item"></div>
  <div id="item-4" class="div-item"></div>
</div>

JavaScript

var divItems = document.getElementsByClassName('div-item');
var totalItems = divItems.length;

for (let i = 0; i < totalItems; i++) {
  if (divItems[i].classList.contains('current-div-item')) {
    // 计算循环后的前后项索引
    const prevIndex = (i - 1 + totalItems) % totalItems;
    const nextIndex = (i + 1) % totalItems;
    
    var previous = divItems[prevIndex];
    var next = divItems[nextIndex];
    
    previous.id = 'previous-item';
    next.id = 'next-item';
    break; // 找到当前项后就可以跳出循环啦，没必要继续遍历
  }
}

逻辑解释 #

1. 处理开头边界：当当前项是第一个元素（i=0），prevIndex = (0-1+5)%5 = 4，对应最后一个元素
2. 处理末尾边界：当当前项是最后一个元素（i=4），nextIndex = (4+1)%5 = 0，对应第一个元素
3. 中间元素：对于列表中间的元素，i-1和i+1的取模结果就是正常的前后索引，完全不影响原有逻辑
4. 额外优化：找到当前项后加break跳出循环，避免不必要的遍历，提升效率

另外提个小细节：你原来的HTML里有多个<div id="item">，这违反了HTML的id唯一性规则，我已经改成了item-1、item-2这样的唯一id，避免后续可能出现的DOM操作问题。

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