jQuery技术疑问：为何所有H3标题文本都追加到每个查看更多链接？

问题场景 #

需求是获取每个H3标签的文本，并将该文本添加到对应的“查看更多”链接中，但实际运行代码后，所有H3的标题文本都被追加到了每一个“查看更多”链接里，不符合预期。

原代码 #

JavaScript代码

var headingContent = jQuery('.eael-grid-post-link').text();
jQuery(".eael-post-elements-readmore-btn").each(function(index) {
  jQuery(this).append("<p class='someclass'>" + headingContent + "</p>");
});

HTML结构示例

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="https://somelink.com" class="eael-post-elements-readmore-btn">Read More
  <p class="someclass">post 1</p>
</a>
<a href="https://somelink.com" class="eael-post-elements-readmore-btn">Read More
  <p class="someclass">post 2</p>
</a>
<a href="https://somelink.com" class="eael-post-elements-readmore-btn">Read More
  <p class="someclass">post 3</p>
</a>
<a href="https://somelink.com" class="eael-post-elements-readmore-btn">Read More
  <p class="someclass">post 4</p>
</a>

问题原因 #

1. 一次性获取所有H3文本：var headingContent = jQuery('.eael-grid-post-link').text();这行代码中，jQuery的.text()方法在匹配多个元素时，会把所有匹配元素的文本内容拼接成一个完整字符串返回。比如如果有4个H3，headingContent里就存了所有4个标题的文本合集。
2. 循环中复用同一文本：在.each()循环遍历“查看更多”链接时，每个链接都追加了这个合集文本，导致所有链接里都出现了全部H3标题。
3. 未建立对应关系：原代码没有处理H3和对应链接的关联逻辑，不知道每个链接应该对应哪个H3标签。

修正方案 #

假设你的HTML结构中，每个H3和对应的“查看更多”链接属于同一个父容器（比如每个帖子项是一个.post-item容器），可以通过DOM层级关系找到当前链接对应的H3：

修正后的JavaScript代码

jQuery(".eael-post-elements-readmore-btn").each(function() {
  // 根据实际HTML结构调整父容器选择器，比如.snippet或.post-item
  var targetHeading = jQuery(this).closest('.post-item').find('.eael-grid-post-link');
  var headingContent = targetHeading.text().trim();
  
  if (headingContent) {
    jQuery(this).append("<p class='someclass'>" + headingContent + "</p>");
  }
});

修正说明 #

• 将标题获取逻辑移入循环：针对每个“查看更多”链接单独处理，避免一次性获取所有标题。
• 通过DOM层级关联对应H3：用.closest()找到当前链接的父容器，再在父容器内查找对应的H3标签，确保每个链接只获取自己对应的标题文本。
• 增加空值判断：避免当H3为空时追加空内容，提升代码健壮性。

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