Seb Duggan schrieb:
> I've got a number of pictures with captions that will be floated
> right in the main body text. The HTML looks like this:
>
> <div class="image">
> <img src="myimage.jpg" width="250" height="350" alt="Image
> description">
> <p>A caption for the image</p>
> </div>
>
> Because the images will vary in width, I don't want to hard-code the
> width into the stylesheet. But I don't want the caption ever to be
> wider than the image.
>
> So I tried the following:
>
>
> $('div.image p').width( $(this).prev().width() );
>
>
> In theory, this should set the width of the caption paragraph to the
> same as the width of the image preceding it; but it doesn't work.
>
> What have I done wrong?
>
>
> Seb
Seb, from the code you supplied the error is that "this" in your
assignment doesn't refer to the selected p. If you're using jQuery 1.1.
you can do this:
$('div.image p').css('width', function() { $(this).prev().width(); } );
With a little more semantic HTML (create a relationship between image
and caption by using a dl)
<dl class="image">
<dt><img src="myimage.jpg" width="250" height="350" alt="Image
description"></dt>
<dd>A caption for the image</dd>
</dl>
the code has to look like:
$('dl.image').css('width', function() { $('img', this).width(); } );
If you don't use jQuery 1.1 you would have to use an each loop, let me
know if that's the case.
-- Klaus
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
