Thank you all for your input into this query.
@Jack - I appreciate your guidance re style
@mkmanning - thanks for your solution - it lead me to one I needed;
due to my poor description, your solution (as I read it) took ALL the
content of the parent p, wrapped it in the div and inserted it
before the parent p. I actually wanted the text (not the caption) to
remain in the p tag and while I tried to filter just the image and
the caption via the children() call (i.e. .children("img,
p.imgcaption")) I couldn't get it to work.
Finally, I settled to focus first on the image and move it, and then
wrap it and insert its caption.
function fnDoImages() {
$('img.imgposl,img.imgposr,img.imgposc,img.tblposl,img.tblposr,img.tblposc').each(function(i)
{
var p = $(this).parent(); //the parent
p tag containing the image to be processed
$(this).insertBefore(p).wrap("<div class='buggybox
clearfix' id='g" + i +"'></div>");
var alt =
$(this).attr('alt'); //alt tag on image
var thg =
$(this).attr('class').substr(0,3); //table or image
var postn =
$(this).attr('class').substr(6); //position of thg - l, r, or c
var title =
$(this).attr('title'); //image caption or table
title is in the title
var width =
$(this).attr('width'); //width of image
if (alt.length=0) {
$(this).attr('alt',''+ title +'');
}
if (thg == 'tbl' && title.length>0) {
$(this).before("<p class='imgcaption' style='width:"
+ width + "px;'>" + title + "</p>");
} else if (title.length>0){
$(this).after("<p class='imgcaption' style='width:"
+ width + "px;'>" + title + "</p>");
};
$("#g"+i).addClass("img" + postn).css({width:width + 'px'});
});
}
Thanks again,
Bruce
At 11:14 a.m. 7/06/2009, you wrote:
Waseem's answer doesn't look good for a couple reasons, most
importantly calling obj.remove(). That will delete the image from the
DOM, which renders every action before it pretty useless :P
It also doesn't take into account the OP's request to also include the
caption text if it exists.
Try this to get familiar with chaining and manipulation:
$('p').wrapInner('<div></div>').children().insertBefore($('p'));
If you're working from having a reference to the image (where this ==
your image):
var p = $(this).parent();
p.wrapInner('<div></div>').children().insertBefore(p);
HTH
On Jun 6, 3:48 pm, infoaddicted <jack.lapla...@gmail.com> wrote:
> wasseem's answer looks good, I'd just like to off a little friendly
> advice on coding style, advice meant to make revisiting
> your own code in the future easier as well as making it under-
> standable to others.
>
> in a block like:
>
> {
> var a= $(this).attr('alt');
> ...
> }
>
> consider using more user friendly variables names, like
>
> var alt = ...
> var substr_1 = ...
>
> and putting spaces around operators like the concatenation
>
> "foo" + "bar"
>
> the few bytes added to your code size is a very small percentage
> of your total page size.
>
> You can find a lot of good advice in the same vein here:
>
> Code Conventions for the JavaScript Programming Language
> -http://javascript.crockford.com/code.html
>
> On Jun 6, 5:11 pm, Bruce MacKay <b.mac...@massey.ac.nz> wrote:
>
> > Hi folks,
>
> > The following function takes an image tag (or table) that appears
> > within a p tag container in the form
> > < p> <img> text < /p>
>
> > and wraps the image (and caption if a title is present) into a div
> > for floating left, right, or centering.
>
> > My problem is that I don't know how to shift the processed image from
> > within the p container to immediately before it (so that the created
> > div is not within a p container)
>
> > I'd appreciate help in this next step.
>
> > Thanks,
>
> > Bruce
>
> > function fnDoImages() {
> >
$('img.imgposl,img.imgposr,img.imgposc,img.tblposl,img.tblposr,img.tblposc'
).each(function(i)
> > {
> > var a = $(this).attr('alt');
> > var q = $(this).attr('class').substr(0,3);
> > var p = $(this).attr('class').substr(6);
> > var t = $(this).attr('title');
> > var w = $(this).attr('width');
> > if (a.length=0) {
> > $(this).attr('alt',''+t+'');
> > }
> > $(this).wrap("<div class='buggybox clearfix'
> > id='g"+i+"'></div>");
> > if (q=='tbl' && t.length>0) {
> > $(this).before("<p class='imgcaption'
> > style='width:"+w+"px;'>"+t+"</p>");
> > } else if (t.length>0){
> > //$(this).after("<p class='imgcaption'
> > style='width:"+w+"px;'>"+t+"</p>");
> > };
> > $("#g"+i).addClass("img"+p).css({width:w+'px'});
> > });
>
> > }
