Мы создаем HTML-страницу, вытаскивая данные из файла JSON. Это отлично работает, и мы динамически создаем список коллапсов с информацией, используя jQuery Mobile.
Теперь мы пытаемся получить свойство смещения каждого бита данных, чтобы мы могли ссылаться на него непосредственно с других страниц.
Проблема в том, что мы не можем получить значение смещения. Используя этот код:
var entry = $("#" + glosID);
console.log(entry);
var offsetJS = entry.offsetTop;
var offsetJQ = entry.offset().top;
console.log("Offset from top(JS): " + offsetJS);
console.log("Offset from top(jQuery): " + offsetJQ);
Выход
Offset from top(JS): undefined
Offset from top(jQuery): 0
Я заметил, что проверка объекта в консоли показывает, что он имеет структуру:
div.0: listofproperties
Поэтому я попробовал
var offsetJS = entry[0].offsetTop;
var offsetJQ = entry[0].offset().top;
и теперь я получаю:
Uncaught TypeError: Object #<HTMLDivElement> has no method 'offset'
Наконец я попробовал это:
var offsetJS = entry[0].offsetTop;
var offsetJQ = entry[0].draggable;
Теперь это интересно. Я выбрал "draggable", потому что это было первое легкое свойство, которое я нашел. Я тестировал это с большим количеством других, которые я нашел, и все они работают. С помощью этого кода я получаю:
Offset from top(JS): 0
Offset from top(jQuery): false
Я проверил множество других свойств, используя уведомление [0] (например, namespaceURI), поскольку я явно обращаюсь к первому объекту в массиве. Но попробуйте, как я могу, я не могу получить смещение или любое другое свойство, связанное со смещением (например, offsetHeight). Я могу, однако, получить другие числа, такие как nodeType.
Что здесь происходит? Является ли jQuery мобильным возиться с вещами?
Экземпляры jQuery и объекты DOM - это не одно и то же. $("#" + glosID)
дает вам экземпляр jQuery, который имеет offset
метода; он содержит элемент DOM (при условии, что существует совпадение с id
), который имеет свойство offsetTop
. Так:
var entry = $("#" + glosID);
var offsetJS = entry[0].offsetTop; // Note the [0], to get the contained DOM element
var offsetJQ = entry.offset().top; // No [0] on this one, we're using the jQuery instance
console.log("Offset from top(JS): " + offsetJS);
console.log("Offset from top(jQuery): " + offsetJQ);
Экземпляры jQuery представляют собой обертки вокруг наборов элементов DOM (ну, как правило, элементы DOM, есть некоторые граничные случаи, когда объекты jQuery являются обертками вокруг других вещей). Экземпляр jQuery может содержать ноль или более элементов DOM. Если вам нужно получить доступ к элементу DOM внутри объекта jQuery, вы можете сделать это с помощью скобок и индекса на основе 0 (так что первый содержащий элемент находится в [0]
, второй - в [1]
и т.д.).
"Геттерные" функции экземпляров jQuery (например, offset()
) будут получать информацию из первого элемента в наборе, если экземпляр jQuery не пуст (они обычно возвращают undefined
если набор пуст). (Напротив, методы "setter" устанавливают значение для всех элементов в наборе.)
$(...).offset().top
Offset $(...).offset().top
даст вам смещение первого сопоставленного элемента в наборе относительно документа. Обратите внимание, что это не то же самое, что и offsetTop
, который относится к родителю смещения (а не к документу). Эквивалентом этого в jQuery является .position().top
.
offset().top
вернет0
потому что он скрыт. проверьте это демо прокрутите вниз и нажмите слова с красной рамкой.