find image from text and append to div

Question

Hi all,

I'm having issues trying to find an image inside a div and append it to a blank div. Here's the code I have:

<div class="newsItem">
  <div class="newsImage"></div>
  <h2><a href="">Latest News 03</a></h2>
  <div class="newsIntro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce  dictum sagittis sapien. Aliquam erat volutpat. Nulla facilisi. Ut purus  neque, condimentum nec, auctor eget, semper ut, enim. Vestibulum sem  tellus, vestibulum a, vehicula ut, feugiat id, libero. Pellentesque enim  justo, condimentum sed, dictum at, viverra eget, odio. Aliquam feugiat  metus id lacus. Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus. Nam iaculis iaculis quam. Donec eu dui.  Morbi quis nulla.</div>
  <div class="clear"></div>
</div>
<div class="newsItem">
  <div class="newsImage"></div>
  <h2><a href="">Latest News 03</a></h2>
  <div class="newsIntro"><img src="/images/stories/img_abopal3.jpg" border="0" alt="Opal History" align="right" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dictum sagittis sapien. Aliquam erat volutpat. Nulla facilisi. Ut purus neque, condimentum nec, auctor eget, semper ut, enim. Vestibulum sem tellus, vestibulum a, vehicula ut, feugiat id, libero. Pellentesque enim justo, condimentum sed, dictum at, viverra eget, odio. Aliquam feugiat metus id lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam iaculis iaculis quam. Donec eu dui.</div>
  <div class="clear"></div>
</div>
<div class="newsItem">
  <div class="newsImage"></div>
  <h2><a href="">Latest News 02</a></h2>
  <div class="newsIntro"><img src="/images/stories/img_abopal6.jpg" border="0" alt="Opal History" align="right" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dictum sagittis sapien. Aliquam erat volutpat. Nulla facilisi. Ut purus neque, condimentum nec, auctor eget, semper ut, enim. Vestibulum sem tellus, vestibulum a, vehicula ut, feugiat id, libero. Pellentesque enim justo, condimentum sed, dictum at, viverra eget, odio. Aliquam feugiat metus id lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam iaculis iaculis quam. Donec eu dui.</div>
  <div class="clear"></div>
</div>

Here's the jQuery:

jQuery(".newsItem").each(function() {
  var thumbImage = jQuery(this).find(".newsIntro img");
  jQuery(thumbImage).appendTo(".newsImage");
});

I can get it to find the images, but can't seem to get it to place them properly, currently the images repeat inside the newsImage div.. If someone could point me in the right direction, that'd be great :)

Cheers

Answer 1

I think this is what you're after:

jQuery(".newsItem").each(function() {
  var thumbImage = jQuery(this).find(".newsIntro img");
  jQuery(thumbImage).appendTo(jQuery(this).find(".newsImage"));
});

You can give it a try here, or a slightly different approach:

jQuery(".newsImage").each(function() {
  $(this).append($(this).siblings('.newsIntro').find('img'));
});

You can test it here. If you don't want to move the <img> just add a .clone() to the image portion in either, e.g. .find('img').clone() in the second.