为什么jQuery在.insertAfter期间重复div？

Question

我有3 li，在执行.insertAfter()之后，内容将被重复

<ul class="course-list">
    <li>

     <div class="course-image">
      <a href="#"><img src="url_of_photo" /></a>
     </div>

     <div class="course-content">
      <p class="post-title"><a title="" href="/courses/level-2-certificate-in-english/"> Level 2 Certificate In English</a>
      </p>

      <p class="post-meta post-meta-level">Level 2</p>

      <p class="post-meta post-meta-boxcolor">light blue</p>
     </div>

    </li>
</ul>

我想将class=“课程-图像”转换到class=“课程内容”之下。

当我执行：

 $('.course-list .course-image').insertAfter('.course-list .course-content');

结果如下所示：

<ul class="course-list">
    <li>

     <div class="course-content">
      <p class="post-title"><a title="Level 2 Certificate In English For Business" href="/courses/level-2-certificate-in-english/"> Level 2 Certificate In English</a>
      </p>

      <p class="post-meta post-meta-level">Level 2</p>

      <p class="post-meta post-meta-boxcolor">light blue</p>
     </div>

     <div class="course-image">
      <a href="#"><img src="url_of_photo" /></a>
     </div>

     <div class="course-image">
      <a href="#"><img src="url_of_photo" /></a>
     </div>

    </li>
</ul>

这件事发生在那颗星的每一个里。

什么是正确的查询来移动每个列表的class=“课程图像”，而不必在每一个列表上重复？

谢谢!

Answer 1

你需要迭代和移动

$('.course-list .course-image').each(function(){
    $(this).insertAfter($(this).next())
});