CODEWITHSUNDEEP
javascriptjqueryhtmlpermalinkshtml-heading
YourPalNurav
YourPalNurav

Reputation: 1320

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

I have a page containing many headers. I'd like to convert every header into a permalink of sorts using jquery/javascript.

HTML Code:

$('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>

The last anchored heading is what I'd like. The whole heading should be clickable. All I get by the current jquery is a hyperlink after the heading.

Upvotes: 1

Views: 988

Answers (3)

Cue
Cue

Reputation: 2759

You could use .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>

Upvotes: 4

Gaurav Gandhi
Gaurav Gandhi

Reputation: 3201

You should use replaceWith from jQuery API

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 to 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 to jsFiddle

Upvotes: 0

glen
glen

Reputation: 3

If you are using bootstrap 4 there is a classes for the heading tags like .h6, .h5 until .h1, Using it would be easy with the anchor tag

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

Upvotes: -1

Related Questions