本文介绍如何使用 jquery 统计容器内所有 figure 元素的总数，并实时显示当前视口内可见的 figure 序号（如“2/3”），支持滚动更新，适用于图文画廊、响应式图集等场景。

本文介绍如何使用 jquery 统计容器内所有 figure 元素的总数，并实时显示当前视口内可见的 figure 序号（如“2/3”），支持滚动更新，适用于图文画廊、响应式图集等场景。

要实现「总数显示 + 当前可见项动态计数」功能，需分两步完成：静态总数渲染与滚动时的动态可见项检测。以下为完整、可直接运行的专业实现方案。

✅ 一、正确统计并插入总数显示

你原先的拼接字符串写法存在语法错误（+totalItems.join('</span>') 无意义，且 totalItems 是数字而非数组）。jQuery 创建元素应使用对象字面量或链式方法：

const $container = $('.is-vertical');
const total = $container.find('figure').length;

// ✅ 推荐：语义清晰、安全可靠
$container.append($('<span>', {
  class: 'numbers',
  text: `1/${total}` // 初始默认显示第1项（可后续更新）
}));

? 提示：<span class="numbers"> 建议添加 CSS 样式提升可读性，例如：

.numbers { 
  display: block; 
  font-size: 0.85em; 
  color: #666; 
  margin-top: 8px; 
  text-align: center; 
}

✅ 二、实时检测并更新“当前可见 figure”序号

仅靠 $(window).scrollTop() 不足以准确判断哪个 <figure> 在视口内——需结合元素位置与滚动偏移综合计算。推荐使用 getBoundingClientRect() 判断是否部分可见（兼容性好、性能优）：

function updateCurrentIndex() {
  const $figures = $container.find('figure');
  const viewportHeight = window.innerHeight;

  for (let i = 0; i < $figures.length; i++) {
    const rect = $figures[i].getBoundingClientRect();
    // 判断是否至少有 20px 高度在视口内（避免临界闪烁）
    if (rect.top < viewportHeight && rect.bottom > 20) {
      const currentIndex = i + 1; // 从1开始计数
      $('.numbers').text(`${currentIndex}/${total}`);
      return; // 只更新首个可见项（适合垂直流式布局）
    }
  }
  // 若无 figure 完全可见，回退显示最后一个（可选逻辑）
  if ($figures.length > 0) {
    $('.numbers').text(`${total}/${total}`);
  }
}

// 初始化 + 监听滚动
updateCurrentIndex();
$(window).on('scroll resize', _.throttle(updateCurrentIndex, 100)); // 使用 Lodash 防抖，或自行实现

⚠️ 注意事项：

• 若页面含大量 figure，建议添加 IntersectionObserver 替代 scroll 监听（更高效、原生支持）；
• 上述逻辑按首个进入视口的 figure作为“当前项”，符合多数图集交互预期；如需高亮完全居中或占比最大的项，可扩展 rect.height * visibleRatio 加权计算；
• 确保 DOM 加载完成后执行脚本（包裹在 $(document).ready(...) 或 DOMContentLoaded 中）。

✅ 三、完整可运行示例（含 HTML + JS）

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .is-vertical { margin: 20px; }
    .is-vertical figure { margin: 30px 0; }
    .numbers { display: block; font-size: 0.9em; color: #555; text-align: center; }
  </style>
</head>
<body>
  <div class="is-vertical">
    <figure><img src="data:image/svg+xml,%3Csvg%20width='200'%20height='120'%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20width='100%25'%20height='100%25'%20fill='%23eee'/%3E%3Ctext%20x='50%25'%20y='50%25'%20dominant-baseline='middle'%20text-anchor='middle'%20font-size='14'%3EImage%201%3C/text%3E%3C/svg%3E"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure>
    <figure><img src="data:image/svg+xml,%3Csvg%20width='200'%20height='120'%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20width='100%25'%20height='100%25'%20fill='%23ddd'/%3E%3Ctext%20x='50%25'%20y='50%25'%20dominant-baseline='middle'%20text-anchor='middle'%20font-size='14'%3EImage%202%3C/text%3E%3C/svg%3E"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure>
    <figure><img src="data:image/svg+xml,%3Csvg%20width='200'%20height='120'%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20width='100%25'%20height='100%25'%20fill='%23ccc'/%3E%3Ctext%20x='50%25'%20y='50%25'%20dominant-baseline='middle'%20text-anchor='middle'%20font-size='14'%3EImage%203%3C/text%3E%3C/svg%3E"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure>
  </div>

  <script>
    $(function() {
      const $container = $('.is-vertical');
      const $figures = $container.find('figure');
      const total = $figures.length;

      // 插入总数初始状态（格式：1/3）
      $container.append($('<span>', {
        class: 'numbers',
        text: `1/${total}`
      }));

      function updateCurrentIndex() {
        const viewportHeight = window.innerHeight;
        for (let i = 0; i < $figures.length; i++) {
          const rect = $figures[i].getBoundingClientRect();
          if (rect.top < viewportHeight && rect.bottom > 20) {
            $('.numbers').text(`${i + 1}/${total}`);
            return;
          }
        }
        // 回退：若全部滚出，则显示最后一项
        $('.numbers').text(`${total}/${total}`);
      }

      // 初始化 + 绑定防抖滚动事件（简易防抖）
      updateCurrentIndex();
      let ticking = false;
      $(window).on('scroll resize', function() {
        if (!ticking) {
          requestAnimationFrame(() => {
            updateCurrentIndex();
            ticking = false;
          });
          ticking = true;
        }
      });
    });
  </script>
</body>
</html>

该方案兼顾简洁性与健壮性，无需第三方库即可投入生产。如需进一步增强体验（如平滑过渡、动画高亮、键盘导航支持），可在 .numbers 更新后添加 CSS transition 或集成 Waypoints 等专业库。