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

Question

我有3里，执行.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="course-image"下方class="course-content"

当我执行时：

 $('.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>

它发生在那个 ul 的每一里。

为每个列表移动 class="course-image" 而不必在每个列表上重复的正确查询是什么？

谢谢！

Answer 1

你需要迭代和移动

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

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

Why is jQuery repeating div during .insertAfter?

html

javascript

css

jquery