为什么我不能访问HTML div / jQuery对象的属性？

Question

我们正在通过从JSON文件中提取数据来创建HTML页面。 这很好用，我们使用jQuery Mobile动态创建了一个带有信息的可折叠列表。

现在，我们尝试获取每个数据位的offset属性，以便我们可以直接从其他页面链接到它。

问题是我们似乎无法掌握偏移值。 使用此代码：

  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;

现在，这很有趣。 我选择“可拖动”是因为它是我发现的第一个简单属性。 我与发现的许多其他产品进行了测试，它们都可以工作。 通过此代码，我得到：

Offset from top(JS): 0 
Offset from top(jQuery): false 

我已经使用[0]通知（例如namespaceURI）测试了许多其他属性，因为我显然正在访问数组中的第一个对象。 但是请尝试尝试，我将无法获取偏移量，也无法获取与偏移量相关的任何其他属性（例如offsetHeight）。 但是，我可以获取其他数字，例如nodeType。

这里发生了什么？ jQuery mobile搞砸了吗？

Answer 1

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元素。 如果您需要访问jQuery对象内的DOM元素，则可以使用方括号和基于0的索引来进行此操作（因此，第一个包含的元素位于[0] ，第二个元素位于[1]等）。

jQuery实例的“ getter”函数（如offset() ）将从集合中第一个元素获取信息，如果jQuery实例不为空（如果集合为空，则通常返回undefined ）。 （相反，“ setter”方法在集合中的所有元素上设置值。）