从文本中查找图像并追加到div

Question

我遇到问题，试图在div内查找图像并将其附加到空白div。下面的代码我有：

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

这里是jQuery的：

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

我可以让它找到了图像，但似乎无法得到它的正确放置它们，目前的图像重复在newsImage DIV中。如果有人能在正确的方向指向我，那简直太好了:)

干杯

Answer 1

我觉得这是你追求的：

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，或稍微不同的方法：

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

You can test it here。如果你不想移动的<img>只需添加一个.clone()在任一方，例如图像部分.find('img').clone()在第二。