JQuery - Find images, append caption from attr

Question

I'm not (at all) familiar with JQuery and only dip my toe 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 therein(if any), give them a class, append a  to them, and enclose both <img> 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 here, 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 from whats on the JQuery site, but it's a mess.

Any help at all greatly appreciated!

EDIT: Using the answer provided by @Xeon06 below, my completed working solution was as follows:

$(".lorem img").each(function() { 
    $(this).addClass("inline-img"); 
    $(this).wrap("<div>"); 
    if ($(this).prop("title")!='') {
        $("<p>").text($(this).prop("title")).insertAfter($(this)); 
    }
});

$(".lorem div").each(function() { 
    $(this).addClass("inline-img-wrap"); 
});

$(".inline-img").each(function() { 
    var mTop = $(this).css('marginTop');
    var mBottom = $(this).css('marginBottom');
    var mLeft = $(this).css('marginLeft');
    var mRight = $(this).css('marginRight');
    var thisfloat = $(this).css('float');
    $(this).parent().css('marginTop', mTop);
    $(this).css('marginTop', '');
    $(this).parent().css('marginBottom', mBottom);
    $(this).css('marginBottom', '');
    $(this).parent().css('marginLeft', mLeft);
    $(this).css('marginLeft', '');
    $(this).parent().css('marginRight', mRight);
    $(this).css('marginRight', '');
    $(this).parent().css('float', thisfloat );
    $(this).css('float', '');
});

The last portion of code was to take the primary positioning attributes of the image (margin and float) and apply them instead to the wrapping div created earlier. I then wiped these values from the images themselves to avoid doubling-up. Excuse the noobish coding!

You can't actually append anything to an `` tag, but you can append it after the ``. — Blazemonger, Jan 05 '12 at 20:25
If you mean that it would appear immedaitely after the image tag, then that would be fine. Assuming both would be wrapped in a div of their own also. — Eamonn, Jan 05 '12 at 20:28

score 2 · Accepted Answer · answered Jan 05 '12 at 20:27

2

$("#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("<div>"); //Add a wrapping div
    $("<p>").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)
});

Tried to explain as best as I could in the comments. Here is a live example.

If there are any questions or you want any clarifications don't hesitate to ask.

answered Jan 05 '12 at 20:27

Alex Turpin

46,743
23
113
145

1

I would only change one thing. well, four actually. I would add a var me = $(this) in the beginning and change all the $(this) to "me". – MJC Jan 05 '12 at 20:29
Works! Thank you kind sir :) @ Mario, does this substitution improve the speed of such a query? – Eamonn Jan 05 '12 at 20:42
@Eamonn That's micro-optimization I wouldn't worry about. A lot of people use `$(this)` throughout functions without any problems. – Alex Turpin Jan 05 '12 at 20:44

score 0 · Answer 2 · answered Dec 31 '12 at 11:34

I found these codes help full to me and did this in easy way with out plugin,

$('#portfolio li img').each(function() {
        $("<h4>").text($(this).attr("title")).insertAfter($(this)); }); 
    $('#portfolio li').hover(function(){
        $(this).children('h4').slideDown();
    },function(){
        $(this).children('h4').slideUp();
    });

hope this helps some one who are looking for simple code for beginners like me

score 0 · Answer 3 · answered Jan 05 '12 at 20:28

0

Hard to give you helper code without seeing the page itself but perhaps you can start by Googling around some of the jQuery methods found in the snippit below.

var images = jQuery( '#div_id' ).find( 'img' );
var x = 0, imglen = images.length, pic;
foreach( x = 0; x < imglen; x += 1 ) {
   pic = images[ x ];
   jQuery( pic ).replaceWith( jQuery( "<p>" + pic.attr( 'title' ) + "</p>" ).addClass( 'className' ).append( pic ) );
}

answered Jan 05 '12 at 20:28

buley

28,032
17
85
106

Be careful with [`.attr`](http://stackoverflow.com/questions/5874652/prop-vs-attr). – Alex Turpin Jan 05 '12 at 20:31

score 0 · Answer 4 · answered Jan 05 '12 at 20:28

In order to act on each image in the div (let's assume its id is "myDiv"), you would use the following function:

$('#myDiv img').each(function(i) {
    //Do stuff to the image, which can be referred to as $(this)
}

Then for each image, do you operation.

I suggest changing the order you describe it, though. The functions you will want to use are wrap(doc), append(doc), and addClass(doc). Wrap the image in the new div, append the  to the new div, and append the text to the paragraph.

Blazemonger · Answer 5 · 2012-01-05T20:38:03.697

0

Shortest way I can think of is this:

$('#div_id').find('img').wrap('<div>').after(function() {
    return $('<p>').text($(this).attr('title'));
});

http://jsfiddle.net/mblase75/ey76x/

edited Jan 05 '12 at 20:38

answered Jan 05 '12 at 20:29

Blazemonger

90,923
26
142
180

Pasted this precisely (changed #div_id to appropriate class name, but no joy. It is within an overall document.ready function. – Eamonn Jan 05 '12 at 20:36
It works in the jsFiddle. Perhaps if you added your original HTML structure to your original question? – Blazemonger Jan 05 '12 at 20:39

JQuery - Find images, append caption from attr

5 Answers5