根据H2的内容动态更改超链接（href）？答案

【问题标题】：Change hyperlink (href) dynamically based on content of H2?根据H2的内容动态更改超链接（href）？
【发布时间】：2021-08-15 19:01:55
【问题描述】：

我目前正在帮助一个大型联属网站动态替换他们的链接。

他们想使用类名wp-block-image的图像后面的H2标签的内容。

这就是代码的样子：

<h2 id="somebookname">Name of some book</h2>

链接：https://www.somesite.com/search-suggestion/

预期结果：某本书的https://www.somesite.com/search-suggestion/Name（是的，最终 URL 中的空格是可以的！）

我们想在上面的链接中添加“某本书的名称”（H2 的内容）作为后缀。任何帮助将不胜感激。

鉴于 h2 id 发生变化，我们希望定位 .wp-block-image 类之后的每个 H2。

愿意使用 jQuery 或 Javascript 来实现这一点。

例子：

<div class="wp-block-image"></div>

<h2 id="somebookname">Name of some book</h2>

我们想在浏览量上改变这个 div：

<div class="searchsuggestion">URL: https://www.somesite.com/search-suggestion/</div>

变成：

<div class="searchsuggestion">URL: https://www.somesite.com/search-suggestion/Name of some book</div>

【问题讨论】：

请向我们展示您的尝试，以及minimal reproducible example！
这些要求很不明确。 DOM 结构根本没有定义。这甚至意味着什么：“.wp-block-image 类之后的每个 H2。”。显示示例 html。链接在哪里？它们存在还是应该附加在某个地方？
@oligofren 我刚刚在上面添加了一个示例。如果 URL 确实存在于 div 中的页面上，并且我们想要更改后缀，那么示例应该会显示给您。很抱歉给您带来不便。
好的，这更有意义...但是页面上有多个 h2 和一个 div？
否页面上最常出现 3 张图片，每张图片下方 1 h2。每个图像下还有一个 div 可用。我们希望使用 H2 的内容动态更改该 div 中的搜索字符串。

标签： javascript jquery replace getelementbyid

【解决方案1】：

杰娜。这个答案基于您对 DOM 结构的解释，在我的可运行 sn-p 中复制。如果它不应该匹配 100%，只需相应地更新选择器。

const imageBlocks = document.querySelectorAll(".wp-block-image");

imageBlocks.forEach((block) => {
  const header = block.getElementsByTagName("h2")[0];
  const link = block.querySelector(".searchsuggestion a");
  link.href += header.innerText;
});

<div class="wp-block-image">
   <h2 id="book-a">Book of Mormon</h2>
   <div class="searchsuggestion">
    <a href="https://www.somesite.com/search-suggestion/">Klicka mig!</a>
   </div>
</div>

这个答案是根据你的问题做出的，不是我推荐的。真正的答案当然是在后端更改呈现的 HTML，但我假设您无权访问它。

【讨论】：