jQuery新手求助：如何将每个article内的img移到对应date元素之后

嘿，我帮你排查下问题所在～你的代码逻辑搞反了方向，而且遍历对象选得不对，才导致所有图片被重复添加到每个.body里。

问题分析 #

你原来的代码是：

jQuery('article .date').each(function() { jQuery(this).closest('article').find('img').after(this); });

这里的问题有两个：

1. 方向搞反：after(this)是把当前的.date元素插入到选中的img后面，而你想要的是把img放到.date后面，这完全是反向操作了。
2. 遍历对象错误：遍历每个.date元素时，每次都会对当前article里的img执行一次操作，多次循环下来就会导致图片被重复移动，出现混乱。

正确代码 #

我们应该遍历每个<article>，在每个article范围内找到对应的img和.date，然后把img插入到.date的后面，用insertAfter()方法就很合适：

jQuery('article').each(function() {
  // 获取当前article的jQuery对象
  const $currentArticle = jQuery(this);
  // 找到当前article里的img，插入到当前article的.date元素后面
  $currentArticle.find('img').insertAfter($currentArticle.find('.date'));
});

或者更简洁的写法：

jQuery('article').each(function() {
  jQuery(this).find('img').insertAfter(jQuery(this).find('.date'));
});

效果验证 #

运行这段代码后，每个<article>里的img都会被准确移动到对应.date元素的后面，和你期望的标记完全一致：

<article>
 <div class="date">Feb 22, 2019</div><img src="imagone.png">
 <div class="body">
 Some random text
 </div>
</article>
<article>
 <div class="date">Feb 23, 2019</div><img src="imagtwo.png">
 <div class="body">
 Some random text
 </div>
</article>
<article>
 <div class="date">Feb 24, 2019</div><img src="imagthree.png">
 <div class="body">
 Some random text
 </div>
</article>

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