如何用jQuery each()检测多个.timeline-graphic div的.step元素末尾

开发者阿泽

2026-8-4

解决方案

这个问题其实很好解决，核心思路是先遍历每个时间线容器（.timeline-graphic），再在每个容器内部单独处理它的.step元素，这样就能保证每个容器里的偏移量从0重新开始计算啦！

推荐实现方式（更清晰易维护）

这种方式把每个时间线的逻辑完全隔离，代码可读性和扩展性更好：

// 遍历每个时间线容器
$(".timeline-graphic").each(function() {
  var i = 0; // 每个容器内部单独初始化偏移量变量
  // 遍历当前容器下的所有.step元素
  $(this).find(".step").each(function() {
    $(this).css('left', i + 'px');
    i += 20; // 每次偏移增加20px
  });
});

为什么这能解决问题？

你原来的代码是把所有.step元素放在一个全局循环里处理，变量i会一直累加，跨容器不会重置。而现在的写法：

先逐个处理每个.timeline-graphic容器
每个容器内部重新初始化i = 0
只处理当前容器下的.step元素，处理完当前容器后，下一个容器会重新开始计算偏移量

另一种实现方式（单循环判断）

如果你偏好只用一个全局循环，也可以通过判断当前元素是否为父容器的最后一个.step来重置i：

var i = 0;
$(".timeline-graphic .step").each(function() {
  $(this).css('left', i + 'px');
  
  // 判断当前元素是否是父容器的最后一个.step
  if ($(this).is($(this).parent().find(".step:last"))) {
    i = 0; // 是最后一个，重置偏移量
  } else {
    i += 20; // 不是最后一个，继续累加
  }
});