jQuery .offset() возвращает неопределенное значение

Я создал эту очень простую функцию .map() с помощью jQuery для хранения верхних смещений моих разделов HTML в массиве (внутри тега скрипта в самом конце тела):

jQuery

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

Это почти так же просто, как в документации jQuery. И это уже сработало! ... Еще неделю назад.
Мой 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 и возвращает смещение каждого итерируемого элемента, как указано в документации:
В рамках обратного вызова функция, это относится к текущему элементу DOM для каждой итерации.
Не говоря уже о том, что это уже отлично сработало для меня около недели назад.

Так в чем же проблема?

Есть ли опечатка? Что-то среднее между бездельем? У меня там определено больше переменных, но это не должно иметь никакого значения, не так ли? Может ли это быть связано с компиляцией нефрита? С кодкитом? Любые подсказки высоко ценятся!

Это мой полный 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)

person Marian    schedule 19.08.2014    source источник
comment
Вы возвращаете одно и то же значение на каждой итерации. кешированный объект this не относится к вашим элементам section, он относится к объекту window. Используйте $(this) вместо obj в обратном вызове maps.   -  person undefined    schedule 19.08.2014
comment
Это решило ошибку консоли, большое спасибо, также очень понятно, почему. К моему удивлению, моя функция «действовать» кажется сломанной, хотя ... Есть идеи или мне лучше открыть новую проблему?   -  person Marian    schedule 19.08.2014
comment
Пожалуйста. Поскольку ваш вопрос касается метода map, он не отражает текущую проблему. Предлагаю разместить еще один вопрос.   -  person undefined    schedule 19.08.2014
comment
Кстати, разве вы не хотели бы сделать это ответом, чтобы я мог пометить это как решенное?   -  person Marian    schedule 21.08.2014
comment
так что... ваш заголовок на самом деле не описывает реальную проблему. это не имеет ничего общего с картой, это метод смещения. конечно, вызвано тем, как вы используете карту, но карта определенно не возвращает неопределенное значение.   -  person Kevin B    schedule 21.08.2014
comment
Изменил название соответственно :)   -  person Marian    schedule 22.08.2014


Ответы (1)


Вы возвращаете одно и то же значение на каждой итерации. кешированный объект this не относится к элементам вашей коллекции section, он относится к объекту window. Используйте $(this) вместо obj в обратном вызове map.

person undefined    schedule 21.08.2014