Javascript 将所有标题转换为锚定链接

我的网页中的所有h1标签都包含一个自定义工具提示和一个锚（与jquery一起添加）。html如下所示：

<h1 id="heading1">
<span>
Intro
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" readonly="readonly" value="http://someurl/somemore/#heading1">
</div>
</div>
<a href="http://someurl/somemore/#heading1" class="anchor"><i class="icon-chain-link">#</i>
</a>
</span>
</h1>

<h1 id="heading1">
<span>
<a href="http://someurl/somemore/#heading1">Intro</a>
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" readonly="readonly" value="http://someurl/somemore/#heading1">
</div>
</div>
<a href="http://someurl/somemore/#heading1" class="anchor"><i class="icon-chain-link">#</i>
</a>
</span>
</h1>

简介
X

对于隐藏工具提示和锚点后的较小设备，我希望将h1中的字符串转换为带有标题本地链接的锚点链接。我想要这样的东西：

<h1 id="heading1">
<span>
Intro
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" readonly="readonly" value="http://someurl/somemore/#heading1">
</div>
</div>
<a href="http://someurl/somemore/#heading1" class="anchor"><i class="icon-chain-link">#</i>
</a>
</span>
</h1>

<h1 id="heading1">
<span>
<a href="http://someurl/somemore/#heading1">Intro</a>
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" readonly="readonly" value="http://someurl/somemore/#heading1">
</div>
</div>
<a href="http://someurl/somemore/#heading1" class="anchor"><i class="icon-chain-link">#</i>
</a>
</span>
</h1>

X

不幸的是，到目前为止，我还没有找到一种只针对文本字符串的方法，我正在使用的jquery wrapInner（）方法包装了h1中的所有元素。这是我到目前为止的代码：

//the function to hide the tooltip, the anchor and convert the h1 to link 
function makeResponsive(){
if ($(window).width() < 780) {
    $('h1').wrapInner('<a href="'+ this.href +'"></a>');
    $('div.tooltip').css('display', 'none');
    $('a.anchor').hide();

} else {
    $('a.anchor').show();
}
}

//run on document load and on window resize
$(document).ready(function () {

//on load
makeResponsive();

//on resize
$(window).resize(function(){
    makeResponsive();
});

});

//隐藏工具提示、锚定和将h1转换为链接的函数
函数makeResponsive（）{
如果（$（窗口）.width（）<780）{
$（'h1'）.wrapInner（''）；
$（'div.tooltip'）.css（'display'，'none'）；
$（'a.anchor'）.hide（）；
}否则{
$（'a.anchor'）.show（）；
}
}
//在加载文档和调整窗口大小时运行
$（文档）.ready（函数（）{
//装载
makeResponsive（）；
//关于调整大小
$（窗口）。调整大小（函数（）{
makeResponsive（）；
});
});

---

这是一个带有附加h2标记的第一个问题：我无法将h标记的id设置为位置。哈希第二个问题：只想将h标记的文本字符串转换为链接如果标记包含

id

属性，则不需要锚定

---

如果此页面

http://www.example.com/page1.html

包含一个类似于

的标记，您只需直接链接到该部分，即类似于

的链接。下面的示例中，您是否忘记了这一部分：

$('a.anchor').click(function(event) {
  event.stopPropagation();
  var thistool = $(this).parent().find('div.tooltip');
  $('div.tooltip').not(thistool).hide();
  thistool.toggle();
  thistool.find('input').select();
});

$('.icon-decline').on('click', function() {
  $(this).parent().hide();
});

$('div.tooltip').on('click', function(event) {
  event.stopPropagation();
});

$(document).on('click', function() {
  $('div.tooltip').hide();
});

---

演示：

下面是我的解决方案：

      if ($(window).width() < 780) {
          $('h1 > span, h2 > span, h3 > span').each(function() {
          window.location.hash = this.parentElement.id;//set the local id as hash
          $(this).contents().eq(0).wrap('<a class="native" href="' + window.location.hash + '"></a>');
    });//get ONLY the text within the h tags and wrap it with a tags that have the local hash

---

这是一个完整的代码示例。

您能提供一个工作示例吗？