问题描述
我的 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 主题并且无法添加类来锚定视频链接
解决方法
可以使用以下内容:
// 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');
});