DOM中移动.meta元素至h3下方时重复显示问题排查

你的代码出现重复显示的核心问题是：循环里的$('h3')会选中页面上所有的h3标签。每次遍历一个.meta元素时，都会把这个元素插入到每一个h3的后面——两次循环下来，每个meta就被复制到了两个h3下方，最终每个模块里都出现了两个meta。

修复后的代码 #

(function($) {
  $('.home_FeedsWrapper .vc_col-sm-4 .post-header .meta').each(function() {
    // 只选中当前meta所在模块内的h3
    $(this).insertAfter($(this).siblings('h3'));
  });
})(jQuery);

代码说明 #

• $(this)指向当前正在遍历的.meta元素
• .siblings('h3')只会查找和当前meta同属一个.post-header容器的h3标签，也就是当前模块自己的标题，不会影响其他模块的元素

你也可以用$(this).closest('.post-header').find('h3')替代.siblings('h3')，效果完全一致，都是精准定位当前模块内的目标h3，避免全局选择带来的重复插入问题。

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