jQuery获取指定div下span的my-data属性值返回undefined的解决方法

• 遍历目标匹配失效：将循环绑定在.label元素上时，每个.label本身是纯文本容器，没有任何子级div，执行find("div:eq(2)")完全匹配不到DOM节点，后续自然无法取到属性值
• 查找逻辑方向颠倒：closest()方法的作用是从当前元素开始，向上查找匹配的祖先节点，但我们需要的span元素是.label的兄弟节点的子元素，属于向下层级的内容，用向上查找的方法永远无法匹配到目标
• 索引选择错误：每个.my-col容器内总共只有2个div子元素（分别是.label和.label-text），即使在父容器内按索引取div，也不存在索引为2的div节点
• 语法不完整：each方法的回调函数末尾缺少闭合括号，本身会导致JS语法报错，无法正常执行

循环获取所有my-data属性值 #

这是最贴合初始需求的写法，不需要纠结复杂层级位置，直接按属性选择器匹配目标元素即可：

$(".my-col").each(function() {
    // 在当前.my-col容器范围内，查找带my-data属性的span，直接读取属性值
    const fieldLabel = $(this).find("span[my-data]").attr("my-data");
    console.log("field label : " + fieldLabel);
});

如果想保留原来遍历.label的循环逻辑，只需要调整查找路径即可：

$(".label").each(function() {
    // 先从当前.label元素向上找到所属的.my-col父容器，再在容器内定位目标span
    const fieldLabel = $(this).closest(".my-col").find("span[my-data]").attr("my-data");
    console.log("field label : " + fieldLabel);
});

单独获取第二个div内的span属性值 #

如果不需要全量循环，只需要取第二个.my-col容器内的属性值，可以直接按索引选择目标容器：

// eq(1)对应选择集合里的第二个元素（索引从0开始计数）
const secondColField = $(".my-col").eq(1).find("span[my-data]").attr("my-data");
console.log("第二个div内的my-data值：" + secondColField);

补充说明：提供的HTML结构里span写法存在不规范问题，将自闭合标签和闭合标签混写为<span my-data="MYFIELD_1"/></span>，虽然不会影响jQuery的属性读取逻辑，但标准HTML写法应写为<span my-data="MYFIELD_1"></span>

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