如何使用jQuery获取Thymeleaf动态id对应的元素值

你的代码不生效是三个问题叠加导致的：

• jQuery选择器里直接写了answerList.answer_id字符串，这是Thymeleaf后端模型的变量名，前端JS环境里不会自动解析成对应的实际值，最终生成的选择器和页面渲染后的真实id完全不匹配。
• jQuery的id选择器中.是类选择器的特殊标识，就算你拿到了正确的id值，如果id内容包含.这类特殊字符，直接写在#后面也会被识别成类匹配规则，无法命中元素。
• 你的Thymeleafth:id表达式末尾多了一个多余空格，渲染出来的实际id结尾会带空格，进一步导致选择器匹配失败。

你当前写法下，假设answerList.answer_id的值为1001，页面最终渲染出的div真实id是1001answer_id （末尾带空格），但你写的jQuery选择器实际匹配的是id为answerList、同时携带answer_idanswer_id类名的元素，完全找不到目标节点。

根据你的JS代码存放位置，选对应写法即可：

1. JS写在Thymeleaf模板文件内（内联脚本） #

直接用Thymeleaf的内联语法输出动态变量值，优先用属性选择器匹配id，避免特殊字符转义问题：

<!-- 先修正th:id的多余空格问题 -->
<div th:id="${answerList.answer_id} + 'answer_id'" class="some class"></div>

<script th:inline="javascript">
// 读取后端渲染的变量值
const realAnswerId = /*[[${answerList.answer_id}]]*/ 0;
// 拼接真实id，用属性选择器获取元素
const content = $(`[id="${realAnswerId}answer_id"]`).text();
</script>

2. JS写在外部独立JS文件中 #

外部JS无法直接读取Thymeleaf的模型变量，推荐两种通用方案：

• 方案一：给目标元素加固定通用类名，跳过动态id匹配逻辑
  给div加一个固定的业务类名，不需要依赖动态id就能直接选中：

  <div th:id="${answerList.answer_id} + 'answer_id'" class="some class answer-content-item"></div>
  

  外部JS直接用类选择器：

  const content = $('.answer-content-item').text();
  

• 方案二：把动态id存在自定义data属性上，JS读取属性后再匹配
  渲染时把动态值写到元素的data属性中：

  <div th:id="${answerList.answer_id} + 'answer_id'"
       th:data-aid="${answerList.answer_id}"
       class="some class">
  </div>
  

  外部JS先读data属性再拼id匹配：

  const aid = $('.some.class').data('aid');
  const content = $(`[id="${aid}answer_id"]`).text();
  

注意：不要用$('#xxx')的形式匹配带特殊字符的动态id，用[id="xxx"]属性选择器的写法不需要处理转义，兼容性更好，不容易出问题。

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