jquery - data() 用于 jQuery 中的类选择器

Question

我的代码中有这一行:

$(".view" + nodeID).data("urls",viewURLs);

(nodeID是一个变量，我为每个元素递增)之后，另一个具有相同类的元素被添加到 DOM 中。后来，我有:

alert($(".view" + nodeID).data("urls"));

由于某种原因，显示“未定义”。现在我的问题是:这是否与我添加具有相同类的另一个元素有关？它会覆盖数据吗？我希望 jQuery 保留类选择器的数据，即使其令人满意的元素发生了变化。或者我在选择器的工作方式中遗漏了一些东西？谢谢。

更多细节:当我设置数据时，nodeID包含一个每次增加的数字。稍后，在单击事件中，从包含 ID 的字符串中提取 ID，并在表达式中使用该 ID 来获取数据:

var nodeElement=$(this).closest("table");
if (nodeElement==null) return;
var nodeFullID=nodeElement.attr("id");
var separatorIndex=nodeFullID.indexOf("-");
if (separatorIndex==-1) return;
var nodeID=nodeFullID.substring(4,separatorIndex);
alert($(".view" + nodeID).data("urls"));

这是否与设置数据时将nodeID视为数字，然后连接到字符串组成选择器，以及获取数据时从字符串中提取nodeID有关？

Answer 1

你的假设

I'd expect jQuery to retain data for a class selector

不幸的是错误的。数据存储在元素库中，而不是选择器库中。所以:

$(".view" + nodeID).data("urls",viewURLs);

将在 $(".view"+ nodeID) 结果集中的所有元素上设置该数据。当向 DOM 添加新元素时，这些元素不会(神奇地)存储该数据。

执行时

$(".view" + nodeID).data("urls")

jQuery 将返回结果集中第一个元素的数据。如果这恰好是您新添加的元素，则结果将为未定义。根据manual :

Return the value at the named data store for the first element in the jQuery collection

嗯，这就是问题所在。可能的解决方案是

A) 在代码中设置一个变量，用于存储每个 nodeID 的 url:

// Define it somewhere
var urlsPerNode = {};
// Add it somewhere
urlsPerNode[ nodeID ] = urls;
// And debug it
alert(urlsPerNode[ nodeID ]);

请记住，该变量应该位于您想要访问它的任何地方的范围内。

B) 每次向 DOM 添加新元素时存储data("urls", viewURLs)。仅将其存储到该新元素就足够了

var newElement = ...; // your logic
$(newElement).data("urls", viewURLs); 

顺便说一句，如果您的 .view + nodeID 是给定代码中的表，您可以通过以下方式简单地读出它:

alert( $(this).closest("table").data("urls") );

因为 jQuery 将数据存储在元素上，而不是使用的选择器上。