jquery 将CSS类应用于所有图像下的标题(JavaScript)

2ic8powd 于 2023-01-30 发布在 jQuery

关注(0)|答案(2)|浏览(209)

- bounty将在6天后过期**。回答此问题可获得+50的声誉奖励。Lloyd正在寻找来自声誉良好来源的答案。

我在我的网站上使用Divi主题构建器。我在文本块中的每个图片下放置了标题。标题都是斜体的。有人能告诉我是否可以添加一些JavaScript，自动识别标题行并应用CSS类到它们吗？如果可以自动化就好了，因为手动添加CSS类到每个标题会非常耗时。
这是我正在使用的HTML：

<div class="dmpro_timeline_item_description">
  <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="" class="wp-image-2179 alignnone size-medium" 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>

jquery

来源：https://stackoverflow.com/questions/75236756/apply-a-css-class-to-captions-under-all-images-in-javascript

2条答案

按热度按时间

jchrr9hc1#

如果您的图像和标题始终采用以下格式：

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

然后你可以用CSS：

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

如果您想实际添加一个类名到<em>标记中，可以使用jQuery：

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

赞(0）回复(0）举报 2023-01-30

guz6ccqo2#

只需将此添加到您的javascript：

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

赞(0）回复(0）举报 2023-01-30

我来回答

jquery 将CSS类应用于所有图像下的标题(JavaScript)

2条答案

相关问题

热门标签

最新问答