CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Adrian
Adrian

Reputation: 3052

Why is jQuery repeating div during .insertAfter?

I have 3 li and the content is repeated after I execute an .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>

I want to transfer class="course-image" below class="course-content"

When I execute:

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

The result becomes like this:

<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>

It happens to every li of that ul.

What is the proper query to move class="course-image" for each list without having to repeat on evey li?

Thanks!

Upvotes: 1

Views: 244

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to iterate and move

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

Upvotes: 3

Related Questions