re-placing of tags in DOM using jquery

Question

I've been trying to re-locating an img tag within an existing CMS-made html

<div class="catItemView groupLeading _inspirations">
 <!-- (2) and place it here -->
 <div class="catItemHeader">
     <h3 class="catItemTitle">
         <a href="some link here">ways of seeing</a>
      </h3>
 </div>
 <div class="catItemBody">
     <div class="catItemIntroText">
         <p>
            <a href="youtube link here">
               <img alt="" src="image_link.jpg" /><!-- (1) would like to grab this-->
               John Berger - ways of seeing
            </a>
         </p>
     </div>
    </div>
 <div class="catItemLinks">
 </div>
 </div>    

I tried this:

 $('div.catItemIntroText img').prepend('div.catItemHeader');

but it only cluttered all the other 'frames' and filled the 'frames'(like this one) with all the images. thanks in advance!

Answer 1

At the moment you're prepending the div to the image. This will prepend the image to the div:

$('.catItemView').prepend($('.catItemIntroText img'));

If you have this structure more than once on the page though, you'll want to do this to get the desired result for every occurrence:

$('.catItemIntroText img').each(function() {
    $(this).parents('.catItemView').prepend($(this));
});