jQuery选择器提取日期时返回空字符串问题求助

兄弟，我一眼就瞅出问题根源了——你的HTML结构犯了语法错误，这才导致jQuery选择器完全失效！

你在<p>标签里嵌套了<div>元素，但根据HTML规范，<p>是短语内容容器，根本不能包含div这种块级元素。浏览器在解析这种不合法的嵌套时，会自动修正DOM结构，直接把div从p标签里“踢出去”。最终实际渲染的DOM结构会变成这样：

<p data-a-target="smc-detail-page-thank-you-summary-amount-collected-date"></p>
<div tabindex="-1" class="expandable-text-wrapper">Jun 18, 2024</div>
<p></p>

这时候你原来的选择器$('[data-a-target="smc-detail-page-thank-you-summary-amount-collected-date"] .expandable-text-wrapper')自然找不到元素了——div已经不是那个p标签的后代了，所以返回空字符串也就不奇怪了。

给你两个解决方案：

• 最优方案：修正HTML结构
  把包含div的<p>标签换成<div>（div可以嵌套任何元素，完全符合规范）。修改后你的原选择器就能正常工作了：
  原代码：

  <p class="claim-summary-expandable-text__body--collapsed tw-c-text-white tw-font-size-6 tw-md-font-size-5" data-a-target="smc-detail-page-thank-you-summary-amount-collected-date">
    <div tabindex="-1" class="expandable-text-wrapper">Jun 18, 2024</div>
  </p>
  

  修改后：

  <div class="claim-summary-expandable-text__body--collapsed tw-c-text-white tw-font-size-6 tw-md-font-size-5" data-a-target="smc-detail-page-thank-you-summary-amount-collected-date">
    <div tabindex="-1" class="expandable-text-wrapper">Jun 18, 2024</div>
  </div>
  

• 临时方案：适配浏览器修正后的DOM
  如果暂时没法改HTML，就换个选择器定位。比如用相邻兄弟选择器，找到目标p标签后面的第一个.expandable-text-wrapper：

  let dateString = $('[data-a-target="smc-detail-page-thank-you-summary-amount-collected-date"] + .expandable-text-wrapper').text();
  

  或者结合父容器更稳妥地定位：

  let dateString = $('[data-a-target="smc-detail-page-thank-you-summary-amount-collected-date"]').closest('[data-a-target="BasicInfoChildren"]').find('.expandable-text-wrapper').text();
  

你可以打开浏览器开发者工具（F12）查看Elements面板里的实际DOM结构，就能直观看到浏览器是怎么修正你的HTML的，也能帮你彻底理解问题所在。

备注：内容来源于stack exchange，提问作者NaturalBornCamper