javascript - 如何从 jQuery 检索以 JS 点表示法存储的数据？

Question

我有一个脚本，将数据存储在 LI 元素中，使用 JS，使用

testel = document.getElementById('#myLi');
testel.angle = 20;

如何使用 JQ 检索该值？ 我尝试创建对元素的新引用，例如 $('#testel').angle 或 $('#testel').data('angle') 但什么也没有有效。

该数据存储在哪里？这可能吗？

Answer 1

How do I retrieve that value with JQ?

两种方式:

1. 从原始 DOM 元素获取它:

   var a = $('#testel')[0].angle;
   //                  ^^^-------- Gets the raw DOM element from the jQuery object
   
   var a = $('#testel').get(0).angle;
   //                  ^^^^^^^-------- This does too
   

2. 使用prop:

   var a = $('#testel').prop('angle');
   

Where is that data stored?

这称为“expando”属性。它存储在原始 DOM 元素上。通常最好尽可能避免使用它们(以避免与可能定义的新标准属性发生冲突，避免与页面上的其他脚本发生冲突)。如果不能，最好只使用其中一个(通常指的是在需要更多信息时添加了其他属性的对象)。

I tried creating a new reference to the element like $('#testel').angle or $('#testel').data('angle') but nothing works.

jQuery 的 data 函数将信息存储在不同的区域(以避免扩展问题)。如果可以的话，我建议更改代码设置值以通过 jQuery 的数据进行设置:

$('#testel').data('angle', 20);

...当然你可以用同样的方式检索它:

var a = $('#testel').data('angle');

<小时/>

正如 A. Wolff 在下面的评论中指出的那样，您的代码有点不匹配。你说你这样做是为了设置它:

testel = document.getElementById('#myLi');
testel.angle = 20;

...但随后尝试使用它来检索它:

$("#testel").angle // (and such)

您的 getElementById 代码会查找 ID 为 #myLi 的元素(包括开头的 # ，作为id的一部分)。虽然这是有效的(您可以在 HTML 中执行此操作，但不能在 CSS 中执行此操作)，但您实际上不太可能这样做:

<li id="#myLi">...</li>

在您的文档中。您可能不希望在 getElementById 调用中使用 #。 (您提供的 getElementById 是 ID 字符串，而不是 CSS 选择器)。

无论如何，您都希望设置和检索时使用的 id 相匹配。因此，如果是 myLi，请使用 getElementById("myLi") 和 $("#myLi")。