如何仅为ast-archive-entry-banner父类下的h1内容包裹span元素？

直接使用以下jQuery代码即可实现需求，精准定位目标元素并完成文本包裹：

$(document).ready(function() {
  // 定位所有ast-archive-entry-banner下的h1元素
  $('.ast-archive-entry-banner h1').each(function() {
    // 获取h1的纯文本内容
    const text = $(this).text();
    // 用带指定类的span包裹文本并替换原内容
    $(this).html(`<span class="my-class">${text}</span>`);
  });
});

代码说明 #

• 选择器.ast-archive-entry-banner h1：自动匹配所有嵌套在ast-archive-entry-banner类元素下的<h1>，无需关心中间的ast-container等层级元素。
• .each()遍历：确保每个符合条件的h1都被单独处理。
• .text()获取内容：仅提取纯文本，避免意外修改h1内可能存在的其他标签（如果需要保留内部标签，替换为.html()即可）。
• .html()替换内容：将包裹好的span结构插入h1内部，覆盖原有内容。

完整使用示例 #

确保页面已引入jQuery库，再添加上述脚本：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 执行处理脚本 -->
<script>
$(document).ready(function() {
  $('.ast-archive-entry-banner h1').each(function() {
    const text = $(this).text();
    $(this).html(`<span class="my-class">${text}</span>`);
  });
});
</script>

特殊情况处理 #

如果你的h1内部除了文本还有其他HTML标签（比如<strong>Title</strong>），想要保留这些标签同时包裹整体，只需修改一行代码：

// 替换成.html()获取完整内容
const content = $(this).html();
$(this).html(`<span class="my-class">${content}</span>`);

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