JQuery – Using Image Attr to populate ‘caption’ paragraph

[Eamonn]

Hi guys, I’m not (at all) familiar with JQuery and only dip my toe in once in a blue moon. However, I have a need that I simply cannot find a quick solution for – despite my conviction that such a quick solution must be available :)

I have a div in which images may be floated amongst the text. I want to scan that div, select all the images (if any), append a

to them, and enclose both and matching

in their own wrapping div. Into that created paragraph block I then want to place the title attribute of said image.

I’ve tried Google and StackOverflow, but both are coated with snippets dealing with plugins, whereas I just want a plug-and-play snippet I can place in my included js file. I have tried piecing together something myself, but it’s a mess.

Any help at all greatly appreciated!

[Eamonn]

Solved via StackOverflow:

$("#yourdiv img").each(function() { //Loops through the images in a specific div. $(this) represents the current image in the loop
$(this).addClass("yourclass"); //Add a class
$(this).wrap("

"); //Add a wrapping div
$("

").text($(this).prop("title")).insertAfter($(this)); //Create a new paragraph with the title property of the image as text and put it after the image (inside our newly created div)
});

I’ve included this in the Snippets gallery

[Chris Coyier]

For HTML5 semantics, I’d wrap the image in a figure and put the caption in a figcaption:

http://jsfiddle.net/chriscoyier/pyTre/

[Author]

Posts