Apply a CSS class to captions under all images (in JavaScript)-CodePudding

I'm using the Divi theme builder on my site. I've placed captions under each of my images in a text block. The captions are all in italics. Could anyone tell me if it's possible for me add some JavaScript that would automatically recognise the caption lines and apply a CSS class to them? It would be good if this could be automated as it would be very time consuming to manually add the CSS class to each caption.

This is the HTML I'm using:

<div >
  <p>
    <a style="color: inherit;" href="https://path-to-image.jpg">
      <img decoding="async" loading="lazy" src="https://path-to-image.jpg" width="300" height="237" alt=""  srcset="https://path-to-image.jpg 300w, https://path-to-image.jpg 1024w, https://path-to-image.jpg 768w, https://path-to-image.jpg 1536w, https://path-to-image.jpg 2048w, https://path-to-image.jpg 15w, https://path-to-image.jpg 1080w, https://path-to-image.jpg 1280w, https://path-to-image.jpg 980w, https://path-to-image.jpg 480w" sizes="(max-width: 300px) 100vw, 300px">
      <br>
      <em>This is the image caption text.</em>
    </a>
  </p>
  <p>This is where further details go (outside of the caption)</p>
</div>

CodePudding user response：

If your images and captions will always be in the following format:

<img>
<br>
<em>Caption</em>

Then you can do it with CSS:

img   br   em {
  font-weight: bold; /* Or whichever styles you want to give to the captions */
}

If you want to actually add a class name to the <em> tags, you can do it with jQuery:

$('img   br   em').addClass('class-name-to-add');

CodePudding user response：

Just add this to your javascript:

document.querySelectorAll('.dmpro_timeline_item_description em').forEach(item => {
    item.classList.add('new-class');
});