如何使用 jquery/javascript 将每个 header 转换为固定链接

Question

我有一个包含许多 header 的页面。我想使用 jquery/javascript.

将每个 header 转换为各种固定链接

HTML代码：

$('h3').each(function() {
  var id = $(this).attr('id');
  if (id) { //To make sure the element has an id
    $(this).append($('<a/>', {
      href: '#' + $(this).attr('id'),
      text: '#'
    }));
  }
});

body {
  border: 1px dashed black;
  padding: 0.5em;
  text-align: center;
  padding-bottom: 100vh;
}

.borderedPara {
  height: 15em;
  border: 1px dashed red;
  padding: 0.5em;
  text-align: center;
}

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <h3 id="Heading1">1<sup>st</sup> Heading</h3>
  <div class="borderedPara">
    1<sup>st</sup> Paragraph Content
  </div>
  <h2 id="Heading2">2<sup>nd</sup> Heading</h2>
  <div class="borderedPara">
    2<sup>nd</sup> Paragraph
  </div>
  <h3 id="Heading3">3<sup>rd</sup> Heading</h3>
  <div class="borderedPara">
    3<sup>rd</sup> Paragraph
  </div>
  <a href="#Heading4">
    <div id="Heading4">4<sup>th</sup> Heading</div>
  </a>
  <div class="borderedPara">
    4<sup>th</sup> Paragraph
  </div>
</body>

</html>

最后一个锚定标题是我想要的。整个标题应该是可点击的。当前 jquery 我得到的只是标题后的超链接。

Answer 1

您应该使用 jQuery API

中的 replaceWith

If you want to convert header tag to link (as you did for 4th header),

$('h3').each(function() {
  var id = $(this).attr('id');
  if (id) { //To make sure the element has an id
    $(this).replaceWith(function () {
      return $('<a/>', {
        id,
        href: '#' + $(this).attr('id'),
        text: $(this).text(),
      });
    });
  }
});

Link 至 jsFiddle

If you want to keep your heading tags and surround header with a link tag

$('h3').each(function() {
  var id = $(this).attr('id');
  if (id) { //To make sure the element has an id
    $(this).replaceWith(function () {
      return $('<a/>', {
        href: '#' + $(this).attr('id'),
        html: `<h3 id=${id}>` + $(this).text() + '</h3>',
      });
    });
  }
})

Link 到 jsFiddle

Answer 2

您可以使用 .wrapInner...

$(':header[id]').each(function() {
    var anchor = document.createElement('a')
    anchor.href = '#' + this.id
    $(this).wrapInner(anchor)
});

body {
  border: 1px dashed black;
  padding: 0.5em;
  text-align: center;
  padding-bottom: 100vh;
}

.borderedPara {
  height: 15em;
  border: 1px dashed red;
  padding: 0.5em;
  text-align: center;
}

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
  <h3 id="Heading1">1<sup>st</sup> Heading</h3>
  <div class="borderedPara">
    1<sup>st</sup> Paragraph Content
  </div>
  <h2 id="Heading2">2<sup>nd</sup> Heading</h2>
  <div class="borderedPara">
    2<sup>nd</sup> Paragraph
  </div>
  <h3 id="Heading3">3<sup>rd</sup> Heading</h3>
  <div class="borderedPara">
    3<sup>rd</sup> Paragraph
  </div>
  <a href="#Heading4">
    <div id="Heading4">4<sup>th</sup> Heading</div>
  </a>
  <div class="borderedPara">
    4<sup>th</sup> Paragraph
  </div>
</body>

</html>

Answer 3

如果您使用 bootstrap 4，heading tags 有一个类，例如 .h6, .h5 until .h1，使用 anchor tag

    <a href="mydomain.com" class="h1">This is an anchor tag with an h1 class header</a>

如何使用 jquery/javascript 将每个 header 转换为固定链接

How to convert every header into a permalink using jquery/javascript

javascript

jquery

html

permalinks

html-heading