获取 data = value 的所有元素答案

【问题标题】：Get all elements with data = value获取 data = value 的所有元素
【发布时间】：2015-04-28 16:34:01
【问题描述】：

我的 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']") 我找不到元素？？？

【问题讨论】：

标签： javascript jquery jquery-selectors custom-data-attribute

【解决方案1】：

当您使用jQuery.data() 将数据分配给元素时，它不会更新元素的data-* 属性；因此，您不能使用属性选择器来选择元素。

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：