Question

我的JavaScript类中存在这个问题：

//===== i set this data record
jQuery(element).data("types", "row");
console.log(jQuery(element).data("types")); // writes "row" (the element is a div)

//==== into other method
//==== i want find all element with data-types = row
console.log(jQuery("[data-types='row']").length); // writes 0

jQuery("div").each(function(i,e){
    console.log(i, jQuery(e).data(), jQuery(e).attr("id")); // writes object{type:row}
});

为什么用这个jQuery（“[data-types ='row']”）我找不到元素???

Answer 1

使用jQuery.data()为元素分配数据时，不会更新元素的data-*属性;因此，您无法使用属性选择器来选择元素。

数据属性第一次被拉入数据属性访问，然后不再访问或变异（所有数据值然后在内部存储在jQuery中。

为了选择这些元素，您可以使用filter()函数和自定义函数：

jQuery("div").filter(function() {
    return $(this).data("types") === "row";
});

注意：如果您还在使用jQuery UI，您会发现:data(key)选择器很有用。

Answer 2

data()方法在最初从元素读取时仅使用DOM。当您使用它来添加或更改元素的数据时，它会将数据放入其内部存储器中，它不会修改DOM。因此DOM选择器无法找到它。来自documentation：

数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（所有数据值都在内部存储在jQuery中）。

要查找所有元素，您可以使用.filter()：

jQuery("div").filter(function() {
    return $(this).data("types") == "row";
});

获取data = value的所有元素

2 个答案: