时间戳

首页 > 解决方案 > 查找兄弟元素的 ID 名称并添加到 href

javascript - 查找兄弟元素的 ID 名称并添加到 href

问题描述

我正在创建一个包含很多子部分的长文档，并希望使用一些 JS 自动化一些步骤。（这是基本 CMS 中的静态页面。）

我有很多这样的：

<div class="title">
  <h3 id="oranges">Oranges are great</h3>
  <a href="XXXX" class="url">Link to this section</a>
</div>

<div class="title">
  <h3 id="apples">Apples are great</h3>
  <a href="XXXX" class="url">Link to this section</a>
</div>

我想要做的是获取 H3 的 ID 名称并自动将其作为锚点插入到链接的 href="" 中。这可能吗？

所以链接（.url）有“#organges”或“#apples”作为href，如果这有意义的话。

jQuery 已经加载，如果这样更容易的话。

标签： javascriptjquery

解决方案

由于 id 是唯一的，要么你必须循环通过带有类名标题的 div 或循环通过标签名，即使你可以将类名分配给标签 h3。获取元素by class name将比by tagname减少人为错误更可取。Vannilla JS 是我个人的偏好和建议

var div = document.querySelectorAll(".title h3"); // or classname can be oranges
div.forEach(function(slide, index) {
    let id_ = slide.getAttribute('id')
    slide.nextElementSibling.href = '#' + id_;
    console.log(slide.nextElementSibling.href)
});
<div class="title">
  <h3 id="oranges">Oranges are great</h3>
  <a href="XXXX">Link to this section</a>
</div>
<div class="title">
  <h3 id="oranges2">Oranges are great</h3>
  <a href="XXXX">Link to this section</a>
</div>

方法二

按标签名循环

var div = document.querySelectorAll("h3"); // or classname can be oranges
div.forEach(function(slide, index) {
    let id_ = slide.getAttribute('id')
    slide.nextElementSibling.href = '#' + id_;
    console.log(slide.nextElementSibling.href)
});
<div class="title">
  <h3 id="oranges">Oranges are great</h3>
  <a href="XXXX">Link to this section</a>
</div>
<div class="title">
  <h3 id="oranges2">Oranges are great</h3>
  <a href="XXXX">Link to this section</a>
</div>

编辑

var div = document.querySelectorAll(".title h3"); // or classname can be oranges
div.forEach(function(slide, index) {
    let id_ = slide.getAttribute('id')
    slide.nextElementSibling.href = '#' + id_;
    slide.nextElementSibling.className = 'url';
    console.log(slide.nextElementSibling)
});
<div class="title">
  <h3 id="oranges">Oranges are great</h3>
  <a href="XXXX">Link to this section</a>
</div>
<div class="title">
  <h3 id="apples">Apples are tasty</h3>
  <a href="XXXX">Link to this section</a>
</div>

推荐阅读