获取$('.example p')元素offset().top值报TypeError如何解决？

$('.example p')返回的是jQuery封装的类数组元素集合，通过[1]这类方括号下标取值时，拿到的是原生DOM节点，并非jQuery实例对象。offset()是jQuery原型上挂载的方法，原生DOM上不存在这个方法，因此会抛出如下类型错误：

Uncaught TypeError: $(...)[1].offset is not a function

你去掉索引直接调用offset()能拿到值，是jQuery的默认设计：当jQuery集合包含多个元素时，调用offset()、css()这类取值方法，默认只会返回集合内第一个元素的计算结果，并不会遍历返回所有元素的对应值。

获取指定索引元素的offsetTop #

使用jQuery提供的.eq(index)方法，获取对应索引位置的jQuery包装对象，再调用offset()即可：

// 获取索引为1（即第二个匹配元素）的offset top值
console.log($('.example p').eq(1).offset().top)

遍历获取所有元素的offsetTop #

方式1：使用jQuery自带的.each()遍历（推荐） #

遍历过程中this指向当前遍历到的原生DOM节点，包装为jQuery对象后即可调用方法：

$('.example p').each(function(index) {
  const offsetTop = $(this).offset().top
  console.log(`第${index + 1}个p元素的offsetTop值：`, offsetTop)
})

方式2：原生for循环按下标取值 #

如果用原生for循环按下标取元素，需要把取到的原生DOM重新用$()包装为jQuery实例，再调用offset()方法：

const pList = $('.example p')
for (let i = 0; i < pList.length; i++) {
  const offsetTop = $(pList[i]).offset().top
  console.log(`第${i + 1}个p元素的offsetTop值：`, offsetTop)
}

• 通过方括号下标、原生forEach/for...of遍历jQuery集合拿到的元素都是原生DOM节点，没有挂载jQuery原型方法，必须用$()重新包装，或者使用jQuery提供的.eq()/.each()等方法拿到jQuery包装对象后，才能调用offset()这类jQuery实例方法
• 不要直接对原生DOM节点调用jQuery提供的方法，会触发类型错误

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