I tried playing around with .append() .insertAdjacentHTML() and .insertAfter() to move each image's alt text to its sibling element, but it is not working as expected...
The target result is:
Image 1
Caption 1
Image 2
Caption 2
var altText = $("img").attr("alt");
$("span#here").append(altText);.wrap {
margin-bottom: 10px;
}
.demo-img {
width: 280px;
}
span#here {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>Greatly appreciated it if anyone could help, thanks!
There is no one liner for this. You need to 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);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>Other way is to select the spans and reference the image
$(".wrap span").text(function() {
return $(this).prev('img').attr('alt');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>