如何在jQuery点击事件中读取第一个锚点的data属性值

看起来你在尝试通过点击元素获取祖先节点下a标签的data属性时遇到了问题，我帮你分析下可能的原因和解决方案：

可能的问题点 #

• parents().closest() 用法冗余且易出错：parents()会返回当前元素的所有祖先节点，再调用closest()完全是多此一举——closest()本身就会从当前元素开始向上遍历DOM树，找到第一个匹配的祖先元素。多余的parents()可能会打乱遍历逻辑，导致找不到目标容器。
• DOM结构匹配问题：需要确保.leaveCommentDv确实是点击元素（.remainingTimeDv .font-sm .cursorDefault）的祖先节点，如果DOM层级不对，closest()自然找不到目标元素。
• data属性访问方式不够合理：虽然attr('data-xxx')能获取属性值，但jQuery推荐使用.data()方法来访问data属性，它会自动处理属性名的驼峰转换（比如data-ajax-coments-res对应.data('ajaxComentsRes')），还能缓存值提升性能。

修正后的代码 #

$(function() {
    $(document.body).on('click', '.remainingTimeDv .font-sm .cursorDefault', function(event) {
        // 直接用closest找最近的.leaveCommentDv祖先节点
        var messageContainer = $(this).closest('.leaveCommentDv');
        // 用jQuery的data方法获取属性值（支持驼峰转换）
        var messageId = messageContainer.find('a:first').data('ajaxComentsRes');
        
        // 增加调试判断，避免弹出undefined
        if (messageId !== undefined) {
            alert(messageId);
        } else {
            alert('未找到目标data属性或对应元素');
        }
    });
});

额外调试建议 #

• 在代码里添加console.log(messageContainer)，查看是否正确获取到了.leaveCommentDv元素，如果输出[]说明DOM结构不匹配，需要检查你的HTML层级关系。
• 核对a标签的data-ajax-coments-res属性拼写是否正确，有没有笔误（比如字符遗漏、大小写错误）。

内容的提问来源于stack exchange，提问作者Mr.Happy