使用jQuery动态设置data属性后无法通过选择器匹配的问题

这是一个很常见的jQuery误区——很多人会把data()方法和原生DOM的data-*属性混为一谈，咱们来拆解一下你遇到的问题：

核心原因：jQuery的data()是内部缓存，而非直接操作DOM属性 #

jQuery的data()方法不会直接修改DOM元素的data-*属性，而是在内部维护了一个独立的缓存对象来存储这些数据。这意味着：

• 你通过data()添加/修改的数据，只会存在于jQuery的内存缓存中，不会体现在浏览器开发者工具的HTML结构里
• 基于DOM属性的选择器（比如[data-added]）自然无法匹配到这些缓存的数据，因为DOM里根本没有这个属性

而页面加载时原生存在的data-initial属性，jQuery会在初始化jQuery对象时，自动把这些属性值读取到内部缓存里，所以你既能通过data('initial')获取值，也能通过[data-initial]选择器找到对应的DOM元素。

结合你的代码具体分析 #

我们来看你代码里的几个关键场景：

1. 原生data-initial的表现

   • 页面DOM里存在<div id="here" data-initial='this was already here'>，jQuery初始化时把这个值存入缓存
   • 所以$('div#here').data('initial')能正常获取到值，同时$('div#here[data-initial="this was already here"]')能匹配到1个元素（因为DOM属性确实存在）

2. 动态设置的data('added')的表现

   • $('div#here').data('added', 'this was added')只是把数据存入了jQuery的内部缓存，没有修改DOM
   • 所以浏览器开发者工具里看不到data-added属性，$("div#here[data-added='this was added']")返回的长度是0（DOM里没有这个属性），但$('div#here').data('added')能从缓存中读取到值

如果你需要同步修改DOM的data-*属性 #

如果你的需求是既要在jQuery中获取数据，又要让DOM上出现对应的data-*属性（支持属性选择器），那么应该使用attr()方法来操作：

// 用attr()直接修改DOM属性
$('div#here').attr('data-added', 'this was added'); 
const added_actual = $('div#here').data('added'); 
$('div#added').text(added_actual); 
const css_found = $("div#here[data-added='this was added']"); 
$('div#added').append(css_found.length) // 此时长度会是1

注意：如果同时使用data()和attr()，jQuery的缓存会优先于DOM属性。比如你先用data()设置了值，再用attr()修改DOM属性，此时data()读取的还是缓存里的旧值，需要用removeData()清除缓存后，再调用data()才会重新读取DOM属性的值。

内容的提问来源于stack exchange，提问作者Don Giulio