jQuery中find()返回对象调用.data()表现异常问题求助

问题复现 #

先看你给出的测试代码：

let ele = $(` <div></div> <div class="test" id="test" data-test="test"></div>` );
const ele1 = ele.find('.test'); // undefined
const ele2 = ele.find('#test'); // undefined
console.log(ele1.data());
console.log(ele2.data());
ele = $('<div class="test" id="test" data-test="test"></div>');
console.log(ele.data()); // works

问题很明确：当用jQuery一次性创建多个平级DOM元素后，用.find()查找目标元素并调用.data()会返回undefined；但直接创建单个目标元素时，.data()就能正常读取data属性值。

异常原因 #

核心问题出在jQuery集合的结构和.find()方法的作用逻辑上：

• 当你用$()传入多个平级的HTML字符串时，jQuery会创建一个包含多个独立DOM节点的集合，这些元素之间是平级关系，没有父子嵌套。
• .find()方法的作用是查找当前元素的子元素/后代元素，但在这个平级集合里，每个元素都是独立的，不存在“父元素包含子元素”的结构，所以.find()根本找不到匹配的元素，返回的是空的jQuery对象，调用.data()自然就返回undefined了。
• 而直接创建单个元素时，jQuery集合里只有这个目标元素本身，调用.data()就是直接读取它自身的data属性，所以正常工作。

解决方法 #

根据你的实际需求，有两种可行的解决思路：

思路1：用.filter()替代.find()筛选元素 #

如果你本来就是要从这个多元素集合里挑出目标元素，不用.find()，改用.filter()方法——它的作用是从当前jQuery集合中匹配符合选择器的元素，而不是找子元素：

let ele = $(` <div></div> <div class="test" id="test" data-test="test"></div>` );
const ele1 = ele.filter('.test'); // 匹配到目标元素
const ele2 = ele.filter('#test'); // 匹配到目标元素
console.log(ele1.data()); // 输出 {test: "test"}
console.log(ele2.data()); // 输出 {test: "test"}

思路2：将多个元素放到父容器中（如果需要层级结构） #

如果你本来是想创建一个有父子层级的DOM结构，那要把所有元素包裹在一个父容器里，这样.find()就能找到子元素了：

// 把元素都放在一个父div里
let ele = $(`<div>
  <div></div>
  <div class="test" id="test" data-test="test"></div>
</div>` );
const ele1 = ele.find('.test'); // 找到子元素
const ele2 = ele.find('#test'); // 找到子元素
console.log(ele1.data()); // 输出 {test: "test"}
console.log(ele2.data()); // 输出 {test: "test"}

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