jQuery悬停字母替换脚本破坏页面格式，求助使用each方法修复

你遇到的问题核心在于原代码把所有<p>标签的文本内容全部提取并合并，然后统一替换所有<p>的HTML，这直接导致：

• 所有段落的文本被混在一起，格式彻底错乱
• 原有的<a>、<sup>等元素被完全覆盖丢失

按照建议的$("p").each()思路，我们需要逐个处理每个<p>，并保留原页面的元素结构，只拆分文本节点为可交互的span，具体实现如下：

修改后的完整代码 #

HTML（保持原结构不变） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
 <div class="one"><p>I'm the text</p></div>
 <div class="two"><p><a>I'm the link in the page</a> <a href="http://vimeo.com/" target="_blank" style="color: rgb(82, 19, 197);">vimeo</a><sup>➶</sup> </p></div>
</div>

CSS（保持原样式不变） #

.wrapper { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); }
.one{ grid-column: 1 /5; grid-row: 1; background-color:pink; }
.two{ grid-column: 5 / 8; grid-row: 1; background-color:yellow; }
.three{ grid-column: 8 / 13; grid-row: 1; background-color:yellow; }

JavaScript（核心修改部分） #

function nextLetter(ch) { 
  if (!ch.match(/[a-z]/i)) return ch; 
  else if (ch === 'Z') return 'A'; 
  else if (ch === 'z') return 'a'; 
  return String.fromCharCode(ch.charCodeAt(0) + 1); 
}

$(document).ready(function(){
  // 逐个处理每个p标签
  $("p").each(function(){
    processTextNodes($(this));
  });

  // 递归处理所有文本节点，保留原有元素结构
  function processTextNodes(element) {
    element.contents().each(function(){
      // 处理文本节点：拆分为带交互的span
      if(this.nodeType === 3){
        var text = this.nodeValue;
        var newHTML = '';
        for(var letter of text){
          newHTML += `<span class='x'>${letter}</span>`;
        }
        $(this).replaceWith(newHTML);
      } 
      // 处理元素节点：递归进去处理内部文本（比如a标签里的文字）
      else if(this.nodeType === 1){
        processTextNodes($(this));
      }
    });
  }

  // 用事件委托绑定悬停事件（动态生成的span需要委托才能生效）
  $(document).on("mouseenter", ".x", function() {
    $(this).text(nextLetter($(this).text()));
  });
})

关键修改点说明 #

1. 逐个处理<p>：用$("p").each()遍历每个段落，确保每个段落的内容独立处理，不会互相干扰
2. 保留原元素结构：通过contents()获取节点（包括文本和元素），只拆分文本节点为span，原有的<a>、<sup>等元素会被保留
3. 递归处理子元素：比如<a>标签里的文本也会被拆分为可交互的span，满足你悬停字母替换的需求
4. 事件委托绑定：因为span是动态生成的，用$(document).on()绑定事件可以确保新生成的元素也能触发交互

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