javascript - 添加特定的锚链接一个类

Question

如何向我的锚链接添加一个类？

我的 html 代码如下所示：

<div class="et_pb_blurb_content">
  <div class="et_pb_main_blurb_image">
    <a href="video.mp4">
      <span class="et_pb_image_wrap">
        <img loading="lazy" width="128" height="128" src="2021/02/cover.png" alt="" class="et-waypoint et_pb_animation_off wp-image-17" />
      </span>
    </a>
  </div>
  <div class="et_pb_blurb_container">
    <h4 class="et_pb_module_header">
      <a href="video.mp4">Watch</a>
    </h4>
  </div>
</div>

使用 javascript 代码我想像这样实现它添加锚链接类：

<div class="et_pb_blurb_content">
  <div class="et_pb_main_blurb_image">
    <a href="video.mp4" class="vp-a">
      <span class="et_pb_image_wrap">
        <img loading="lazy" width="128" height="128" src="2021/02/cover.png" alt="" class="et-waypoint et_pb_animation_off wp-image-17" />
      </span>
    </a>
  </div>
  <div class="et_pb_blurb_container">
    <h4 class="et_pb_module_header">
      <a href="video.mp4" class="vp-a">Watch</a>
    </h4>
  </div>
</div>

我使用 wordpress divi 主题，无法添加类来锚定视频链接

Answer 1

可以使用如下内容：

// grab all the parent items by classname
const linkParents = document.querySelectorAll('.et_pb_module_header');

// iterate over parents
[...linkParents].forEach((parent) => {
  // grab the anchor tag from the parent
  const link = parent.querySelector('a');

  // add your classname to the anchor tag
  link.classList.add('vp-a');
});