Geek Answers Handbook

How to add to the nearest div (by class)?

I am trying to make jQuery that will find the images inside the text, wrap the image inside the div, and then move it to another div, but I cannot get it to work.

Here is the code that I have that works:

$(".newsIntro").find("img").wrap("<div class=\"newsImage\" />");

But when I try to move it, either all the images on the page move inside the same div (instead of going to the parent div (".newsItem"), or nothing happens).

 $(".newsImage").appendTo( $(this).closest(".newsItem") );

The above does nothing:

 $(".newsImage").appendTo(".newsItem");

The one above moves them all to the first div .newsItem .

Here is the HTML snippet:

 <div class="newsItem"> <div class="newsHeader"> <h2><a href="/news-information/67-latest-news-03.html">Latest News 03</a></h2> </div> <div class="newsIntro"><img src="/images/stories/opals-are-lucky/img_abopal_lucky.jpg" border="0" align="left" />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="newsHeader"> <h2><a href="/news-information/68-latest-news-03.html">Latest News 03</a></h2> </div> <div class="newsIntro"><img src="/images/stories/about-us/img_showroom.jpg" border="0" 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>
+4
source share
1 answer

You need to loop through .each() , so this applies to every element like you, for example:

 $(".newsImage").each(function() { $(this).closest(".newsItem").append(this); });

Since .appendTo() is reflected in .append() In any case, it’s more efficient to follow this route.

+9
source

More articles:


All Articles