jQuery添加换行符执行顺序异常问题求助

核心原因：:nth-child选择器的匹配规则 #

:nth-child是基于父元素下所有子节点的位置进行匹配的，不是仅统计同类型元素的位置。你的操作顺序会改变父元素子节点的结构，导致后续选择器匹配不到目标元素。

先处理第2个span时失效的过程 #

假设初始DOM结构为：

<div id="xodv3fdv25gz">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

1. 执行第一行代码：$("#xodv3fdv25gz span:nth-child(2)").before("<br>")
   插入<br>后，父元素的子节点顺序变为：

   <div id="xodv3fdv25gz">
     <span>1</span>
     <br>
     <span>2</span>
     <span>3</span>
   </div>
   

2. 再执行第二行代码：$("#xodv3fdv25gz span:nth-child(3)")
   这个选择器要找的是「父元素第3个子节点，且是span」，但此时父元素第3个子节点是原来的第2个span，你原本要操作的第3个span现在是父元素的第4个子节点，所以选择器匹配不到目标，换行添加失败。

交换顺序后正常的过程 #

1. 先执行$("#xodv3fdv25gz span:nth-child(3)").before("<br>")，插入后结构变为：

   <div id="xodv3fdv25gz">
     <span>1</span>
     <span>2</span>
     <br>
     <span>3</span>
   </div>
   

2. 再执行$("#xodv3fdv25gz span:nth-child(2)")
   父元素的第2个子节点仍是原来的第2个span（插入的<br>在第3个span前，不影响前两个span的位置），所以能正常匹配并添加换行，最终达到预期效果。

额外建议 #

你使用的jQuery 1.2是非常老旧的版本，不支持CSS3的:nth-of-type选择器。这个选择器会仅统计父元素下同类型元素的位置，若使用span:nth-of-type(2)和span:nth-of-type(3)，无论操作顺序如何都能生效，因为插入的<br>不会干扰span元素的位置统计。

内容的提问来源于stack exchange，提问作者皮皮萌宝