Почему я не могу получить доступ к свойствам HTML-объекта div / jQuery?

0

Мы создаем 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 мобильным возиться с вещами?

  • 0
    Знаете ли вы, в чем разница между объектом jQuery и элементом DOM?
  • 0
    если этот элемент находится внутри сворачиваемого объекта и он свернут , то offset().top вернет 0 потому что он скрыт. проверьте это демо прокрутите вниз и нажмите слова с красной рамкой.
Показать ещё 4 комментария
Теги:
object
jquery-mobile

1 ответ

0

Экземпляры 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" устанавливают значение для всех элементов в наборе.)

  • 0
    Как мне тогда получить значение смещения? Если я использую offset (). Top, чтобы попытаться получить значение из первого элемента (что мне и нужно), я получу 0. Я знаю, что это неправильно, так как я вижу значения в консоли.
  • 0
    @SubjectiveEffect: $(...).offset().top Offset $(...).offset().top даст вам смещение первого сопоставленного элемента в наборе относительно документа. Обратите внимание, что это не то же самое, что и offsetTop , который относится к родителю смещения (а не к документу). Эквивалентом этого в jQuery является .position().top .
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню