jQuery each循环调用getBoundingClientRect报错及多元素处理方案

• 第一个报错：getBoundingClientRect是原生DOM元素的专属方法，你代码中$(this)是jQuery封装后的实例对象，不是原生DOM节点，因此没有该方法，调用就会抛出类型错误。
• 第二个写法失效：jQuery的each方法回调函数的参数顺序为(遍历索引, 原生DOM元素)，你直接取第一个参数el实际是数字索引，自然无法调用DOM方法。

基于jQuery的写法 #

你可以取each回调的第二个参数获取原生DOM，或者将jQuery实例转成原生DOM：

// 方式1：使用each回调的第二个参数
$('h2[id*="h-"]').each(function(index, el) {
    console.log(el.getBoundingClientRect());
});

// 方式2：将jQuery对象转原生DOM
$('h2[id*="h-"]').each(function() {
    console.log($(this)[0].getBoundingClientRect());
});

更轻量的原生JS实现 #

如果不需要依赖jQuery，直接用原生选择器遍历即可，性能更优：

document.querySelectorAll('h2[id*="h-"]').forEach(el => {
    console.log(el.getBoundingClientRect());
});

如果只是静态页面一次性获取元素的位置尺寸，上述实现已经完全满足需求，不需要额外引入Observer类API。只有当你需要监听元素的尺寸、位置实时变化（比如元素动态渲染、窗口resize后需要更新位置数据）的场景下，才需要使用ResizeObserver或者IntersectionObserver来监听元素变化，避免重复手动调用获取逻辑。

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