Can somebody help me out? I'm trying to set a width of a span class
based on the width of the image inside of it. I've got a container
that will also have a bunch of images... some of them will have
captions and will be wrapped in a class "caption"... some will not be
wrapped in the "caption" class. I'm trying to loop through the
container... find all the "caption" classes... and then set the width
of the caption class based on the width of the image inside of it.
Here's what a basic image with a caption will look like:
<span class="caption fltrt">
<img src="" alt="" />
<p>caption goes here</p>
</span>
I'm able to look through the containing div and locate all the images
and then get their width using the following:
// Find all images in the overview section
var overviewImgs = $(".overview-content").find("img");
// Get the width of each image in the overview section
for (i = 0; i < overviewImgs.length; i++) {
console.log($(".overview-content").find('img:eq('+i+')').width());
}
I can't figure out how to loop through and find all the instances of
"caption" and then set the width of the "caption" class based on the
width of the image inside of it.
I can find all the "caption" classes... and I can find all the images
and get the image widths... but I'm not sure how to combine these two
so I am only finding the images inside of the "caption" class and then
setting the "caption" class width based on the width of the image
inside of it.
The images are added by a separate content developer and can be any
size. Not all images will have captions... only the ones wrapped in
the "caption" class.
Any ideas? I'm at a loss.
Thanks.
