使用jQuery prependTo调整.tabs内div结构的问题排查与解决

我懂你碰到的这个坑了——你原本想把每个.team-member-name精准移入对应tabs容器里的.team-member-description，结果所有名字都被塞进了每一个描述框里，这完全是因为选择器的范围没限制对！

问题根源 #

你写的$(".team-member-description")是全局选择器，会选中页面上所有带这个类的元素。所以每次循环执行prependTo时，当前的.team-member-name都会被添加到所有描述容器中，最后自然就出现了重复堆积的情况。

正确解决方案 #

我们需要把查找范围限定在当前.team-member-name所在的.tabs容器内，有两种常用写法：

写法一：通过父容器限定范围

$(".tabs > .team-member-name").each(function(){
  // 找到当前name所在的tabs容器，再在里面找对应的description
  const targetDesc = $(this).closest(".tabs").find(".team-member-description");
  $(this).prependTo(targetDesc);
});

• closest(".tabs")：定位到当前name元素最近的父级.tabs容器，把查找范围锁在这个容器内
• find(".team-member-description")：在这个限定容器里找到对应的描述框，确保和当前name是一对的

写法二：利用兄弟元素关系

因为你的初始结构里，.team-member-name的下一个兄弟元素正好就是对应的描述框，所以可以直接用next()：

$(".tabs > .team-member-name").each(function(){
  $(this).prependTo($(this).next(".team-member-description"));
});

这种写法更简洁，适合结构固定的场景。

执行后效果 #

运行上面的代码后，每个.tabs容器的结构都会变成你期望的样子：

<div class="tabs">
  <div class="team-member-description">
    <div class="team-member-name">Mirko</div>
    <p>Text</p>
  </div>
</div>
<div class="tabs">
  <div class="team-member-description">
    <div class="team-member-name">Marko</div>
    <p>Text</p>
  </div>
</div>

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