<h3>Multiple images</h3>
<div class="wrap">
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4Y5jq?ver=ac72&q=90&m=6&h=201&w=358&b=%23FFFFFFFF&l=f&o=t&aim=true" alt="Example Image Caption 1" class="demo-img">
<span id="here"></span>
</div>
<div class="wrap">
<img src="https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/gldn-M365-CP-Microsoft365-Commercial?wid=380&hei=213&fit=crop" alt="Example Image Caption 2" class="demo-img">
<span id="here"></span>
</div>
.wrap {
margin-bottom: 10px;
}
.demo-img {
width: 280px;
}
span#here {
display: block;
}
// Method 1: Loop over the images and set the text in the loop
$(".wrap img").each(function (_, img) {
const alt = img.alt;
$(img).next("span").text(alt);
});
// Method 2: Select the spans and reference the image
/*
$(".wrap span").text(function () {
return $(this).prev("img").attr("alt");
});
*/
This Pen doesn't use any external CSS resources.