为什么jQuery的.text()方法无法返回目标div内部的文本值？

问题原因 #

jQuery的closest()方法作用是从当前元素开始向上遍历DOM树，查找匹配选择器的祖先节点。你代码中的#comment-pk元素和.comment-upvote-wrapper的父容器.comment-box是平级关系，不属于它的祖先节点，所以closest()无法匹配到目标元素，读取到的text()为空，不会弹出预期内容。

修复方案 #

方案1：直接通过ID选择器取值 #

ID在单页DOM中是唯一的，无需通过相对位置查找，直接修改JS代码即可：

$('.comment-upvote-wrapper').on('click', function() {
    // Get the comments pk
    var comment_pk = $('#comment-pk').text()
    alert(comment_pk)
})

方案2：多评论场景适配方案 #

如果页面存在多条评论，重复使用id="comment-pk"不符合DOM规范，建议将评论主键存入对应评论块的自定义属性中：
修改HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comment-box" data-comment-pk="Test Value">
  <div class="comment-options">
    <div class="comment-upvote-wrapper comment-options-box">Return "Text Value"</div>
  </div>
</div>

对应JS代码调整为：

$('.comment-upvote-wrapper').on('click', function() {
    // Get the comments pk
    var comment_pk = $(this).closest('.comment-box').data('comment-pk')
    alert(comment_pk)
})

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