如何统计页面figure元素总数并实时显示当前可见元素序号？

需求 #

统计页面中.is-vertical容器内figure元素的总数，并实时显示当前视口中可见的figure元素序号。

现有HTML结构 #

<div class="is-vertical">
  <figure><img src="src.jpg"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure>
  <figure><img src="src.jpg"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure>
  <figure><img src="src.jpg"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure>
</div>

现有代码问题分析 #

1. 总数统计部分：获取总数的代码var totalItems = $( ".is-vertical figure" ).length;是正确的，但后续显示代码存在语法错误：

   • append方法调用逻辑混乱，字符串拼接位置错误
   • totalItems是数字类型，不存在数组的join()方法
   • 多余的});导致语法报错

2. 可见元素判断：使用$(window).scrollTop()确实可以实现实时更新，但结合getBoundingClientRect()能更精准地判断元素是否处于视口内。

完整解决方案 #

1. 正确统计并显示总数 #

修正显示逻辑，用模板字符串直接拼接内容：

// 获取figure总数
var totalItems = $(".is-vertical figure").length;
// 向容器添加显示总数的元素
$('.is-vertical').append(`<span class="numbers">总数量：${totalItems}</span>`);

2. 实时检测并显示可见元素序号 #

通过scroll事件结合元素位置判断，实时更新可见元素的序号：

// 判断元素是否处于视口内的工具函数
function isInViewport(el) {
  const rect = el.getBoundingClientRect();
  // 此处为元素完全在视口内的判断逻辑，若需兼容部分可见可调整条件
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

// 更新可见元素序号的函数
function updateVisibleFigures() {
  const visibleNumbers = [];
  // 遍历所有figure元素，收集可见的序号（从1开始计数）
  $(".is-vertical figure").each(function(index) {
    if (isInViewport(this)) {
      visibleNumbers.push(index + 1);
    }
  });
  // 确保显示容器存在，更新内容
  let visibleSpan = $('.visible-numbers');
  if (!visibleSpan.length) {
    visibleSpan = $('<span class="visible-numbers"></span>').appendTo('.is-vertical');
  }
  visibleSpan.text(`当前可见序号：${visibleNumbers.length ? visibleNumbers.join(', ') : '无'}`);
}

// 页面初始化及滚动时触发更新
$(function() {
  // 初始化总数显示
  const totalItems = $(".is-vertical figure").length;
  $('.is-vertical').append(`<span class="numbers">总数量：${totalItems}</span>`);
  
  // 初始化可见元素显示
  updateVisibleFigures();
  
  // 监听滚动事件，实时更新
  $(window).scroll(updateVisibleFigures);
});

说明 #

• getBoundingClientRect()直接获取元素相对于视口的位置，比单独使用scrollTop更直观准确
• 可根据需求调整isInViewport函数内的判断逻辑，比如允许元素部分可见也计入统计
• 滚动事件中直接调用updateVisibleFigures即可实现实时更新

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