Как конвертировать каждый заголовок в постоянную ссылку, используя jquery / javascript - PullRequest
Новая
       21

Как конвертировать каждый заголовок в постоянную ссылку, используя jquery / javascript

0 голосов
/ 14 января 2019

У меня есть страница, содержащая много заголовков. Я хотел бы преобразовать каждый заголовок в постоянную ссылку, используя jquery / javascript.

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 - это гиперссылка после заголовка.

Ответы [ 3 ]

0 голосов
/ 14 января 2019

Вы можете использовать .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>
0 голосов
/ 14 января 2019

Если вы используете 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>
0 голосов
/ 14 января 2019

Вы должны использовать replaceWith из jQuery API

Если вы хотите преобразовать тег заголовка в ссылку (как вы сделали для 4-го заголовка), 

$('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(),
      });
    });
  }
});

Ссылка на jsFiddle

Если вы хотите сохранить теги заголовков и окружить заголовок тегом ссылки 

$('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>',
      });
    });
  }
})

Ссылка на jsFiddle

...