将 CSS 类应用于所有图像下的标题（在 JavaScript 中）答案

【问题标题】：Apply a CSS class to captions under all images (in JavaScript)将 CSS 类应用于所有图像下的标题（在 JavaScript 中）
【发布时间】：2023-01-31 02:53:43
【问题描述】：

我在我的网站上使用 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>

【问题讨论】：

您可以编辑您的问题并包含一个 HTML sn-p（加上您拥有的任何 JavaScript）以便我们可以看到您做了什么吗？
如果你的标题可以被识别，那并不复杂。确定的意思是：特定的类，在你的 html 结构中的特定位置......但是你的 html 需要更进一步
非常抱歉，完全忘记添加我的 HTML 了！因此，我刚刚编辑了我的问题。目前我没有任何 JavaScript。我应该补充一点，嵌入的图像也可以放置在文本块的下方。因此，这将导致这样的结构 -> 图片、标题、描述性文本、另一张图片、另一张标题、更多描述性文本。

标签： javascript jquery css image divi

【解决方案1】：

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

<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');

【讨论】：

从父 div 继承会更好，你不觉得吗？这看起来很脆弱。
谢谢你。如何仅使用您的 CSS 定位特定页面？
@Lloyd 由于您使用的是 Divi，您可以将唯一 ID 或类名（例如“foo”）添加到包含标签（例如部分）。然后将我的选择器更改为，例如div.foo img + br + em。这只会在包含<div class="foo"> 的页面上选择<em> 标签。
@kmoser 为什么建议使用如此脆弱的选择器？这很不寻常
谢谢 Kmoser，您的解决方案正是我要找的。它可能并不理想（如@Ringo 所述），但它肯定会在我们有限的时间内完成工作！我没有时间浏览数百个 em 并手动为它们应用类名（正如你建议的@Ringo）

【解决方案2】：

只需将其添加到您的 javascript 中：

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

【讨论】：

您的解决方案似乎是一个不错的解决方案 - 谢谢！我是否需要将“em”更改为“img + br + em”，以便它仅针对那些确切的结构（而不是所有斜体文本）？
不，我只会保留它。如果块内有多个“em”，则尝试向要更改的“em”添加类名，然后将选择器更改为：document.querySelectorAll('.dmpro_timeline_item_description em.new-em-class')
你真的应该花半个小时阅读基本的 CSS。网上有很多基础教程，在这里对你有帮助。祝你好运

【解决方案3】：

你可以用这个

$(".dmpro_timeline_item_description")
.find('img[loading="lazy"]')
.next().next()
.addClass('some-class');

这将找到具有惰性属性的图像，并将类添加到 img 之后的第二个元素。

【讨论】：