jQuery appendTo作用域问题：子元素被批量复制至所有父容器

问题出在你直接批量操作所有.subheader和.section，导致所有副标题被重复添加到每个区块里。要实现每个区块只移动自己内部的副标题，需要遍历单个区块，在当前区块的作用域内操作元素：

$('.section').each(function() {
  // 获取当前区块内的副标题元素
  const $subheader = $(this).find('.subheader');
  // 获取当前区块内的标题元素
  const $header = $(this).find('.header');
  // 把副标题移到标题的上方（同级位置）
  $subheader.insertBefore($header);
});

代码说明： #

• .each() 会逐个遍历所有.section元素，this指向当前正在处理的那个区块，确保操作只在当前区块内部进行。
• $(this).find('.subheader') 只查找当前区块里的副标题，不会拿到其他区块的元素。
• insertBefore($header) 把副标题元素移动到对应标题的同级上方，完全符合你的需求。

如果你想简化代码，也可以写成链式调用：

$('.section').each(function() {
  $(this).find('.subheader').insertBefore($(this).find('.header'));
});

这样就能保证每个区块的副标题只被移动到自己区块的标题上方，不会出现重复复制的问题。

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