Question

我正在尝试在我的页面上获取所有H3元素以构建链接并创建动态摘要。

所以这就是我所拥有的：

$('h3').attr('id', function() {
    return this.innerHTML;
});

$('h3:not(:last)').append(" › ");
var headers = $('h3').text();

$('.summary').append(headers);

我有这个：Header1> Header2> Header3> Header4

但是我不知道如何使用每个H3元素的ID并构建链接，就像有这样的东西：

<a href="Header1">Header1</a> › ...

感谢您的帮助。

问候。

编辑：另一个问题是我的H3中还添加了“>”，而不仅仅是摘要......

Answer 1

尝试使用.each（）

循环所有h3

$('h3').each(function(){
   var getId = $(this).attr('id');  // to get id for this h3
   var headers = $(this).text();  // to get text for this h3
   // to change this h3 html with anchor 
   $(this).html('<a href="'+headers +'">'+headers +'</a>  › '); 
});

此代码将转换

<h3>Header1</h3>

到

<h3><a href="Header1">Header1</a> > </h3>

是你在寻找什么？

如果你想将锚点附加到.summery类..只需使用

$('h3').each(function(){
       var getId = $(this).attr('id');  // to get id for this h3
       var headers = $(this).text();  // to get text for this h3
       // to change this h3 html with anchor 
       $('.summery').append('<a href="'+headers +'">'+headers +'</a>  › '); 
    });

此代码的结果

<div class="summery">
   <a href="Header1">Header1</a> > 
   <a href="Header2">Header2</a> > 
   <a href="Header3">Header3</a> > 
   ......
</div>

Answer 2

您应该使用jQuery的.each()函数，如下所示：

$(document).ready(function() {
  $('h3').each(function(index) {
    var id = $(this).attr('id');
    var text = $(this).text();

    var spacer = index ? ' > ' : ''; // Don't show a spacer for the first item
    var header = spacer + '<a href="#' + id + '">' + text + '</a>';

    $('.summary').append(header);
  });
});

Codepen

获取H3并使用ID构建链接

2 个答案: