jQuery .offset() 返回未定义的值答案

【问题标题】：jQuery .offset() returns undefined valuejQuery .offset() 返回未定义的值
【发布时间】：2014-10-12 21:35:31
【问题描述】：

我用 jQuery 构建了这个非常基本的 .map() 函数，以将我的 HTML 部分的顶部偏移量存储在一个数组中（在正文末尾的脚本标记内）：

jQuery

$(window).load(function() {
    var obj = $(this),
        sec = $('section'),
        arr = sec.map(function() {
                  return obj.offset().top
              }).get();
})

这几乎和jQuery documentation 一样简单。它已经奏效了！ ...直到一周前。
我的 HTML（jade [用 CodeKit 编译]）也有一个非常简单的结构：

HTML

body.preload
    section#id1
        whateverContent
    section#id2
        moreContent
    section#id3
        evenMoreContent
    ...

令人惊讶的是，今天控制台决定告诉我 top 未定义：

控制台

Uncaught TypeError: Cannot read property 'top' of undefined

假设在我的函数中 .map() 采用所有 section 标记并返回每个迭代元素的偏移量，正如文档中所述：
在回调函数中，this 指的是每次迭代的当前 DOM 元素。
更不用说大约一周前这对我来说已经很有效了。

那么这里的问题是什么？

有错别字吗？中间有什么东西在捣乱吗？我在那里定义了更多变量，但它不应该有任何区别，不是吗？莫非跟编玉有关系？使用 CodeKit？任何线索都非常感谢！

这是我在页面上未经审查的完整 JS（一周前工作）：

// Let DOM finish loading
$(window).load(function() {
    // CSS animation hack
    $('body').removeClass('preload')
    // Sticky nav and active class
    var win = $(window),
        doc = $(document),
        obj = $(this),
        sec = $('section'),
        nav = $('nav'),
        anc = $('nav a'),
        pos = nav.offset().top,
        // Fill array with top offsets from sections
        arr = sec.map(function() {
                    return obj.offset().top
              }).get(),
        act = function() {
                    win.scrollTop() > pos ? nav.addClass('sticky')
                    : nav.removeClass('sticky'),
                    $.each(arr, function(i, val) {
                            (win.scrollTop() > val && win.scrollTop() < (val + sec.eq(i).outerHeight(true) + 1) ) ? anc.eq(i).addClass('active')
                            : anc.eq(i).removeClass('active')
                    })
                };
    // Execute sticky function
    win.scroll(act)

【问题讨论】：

您在每次迭代中返回相同的值。缓存的 this 对象不引用您的 section 元素，它引用 window 对象。在maps 回调中使用$(this) 而不是obj。
这解决了控制台错误，非常感谢，也很清楚为什么。令我惊讶的是，我的“行为”功能似乎被破坏了......有什么想法还是我应该打开一个新问题？
不客气。由于您的问题集中在 map 方法上，它并不代表当前的问题。我建议发布另一个问题。
你不想让这个答案顺便说一句，所以我可以把它标记为已解决？
所以...您的标题实际上并没有描述真正的问题。这与map无关，是offset方法。当然是由您使用地图的方式引起的，但地图绝对不会返回未定义的。

标签： jquery undefined pug offset codekit

【解决方案1】：

您在每次迭代中都返回相同的值。缓存的 this 对象不引用您的 section 集合的元素，它引用 window 对象。在map 的回调中使用$(this) 而不是obj。

【讨论】：