Question

我有一个非常大的html文档，其中包含许多<h4>标题，并附有一个简短的<p>'正文'。

我需要为每个标题添加一个锚点（它是正确的术语，顺便说一下？）。

我正在迭代标题，并将它们添加到菜单-ul：

headz = document.getElementsByTagName("h4");
arrayOfHeaders=[];

x = 0;
y = headz.length;

$("#menu").html("<ul>")
while (x<y){   
    arrayOfHeaders[x] = "<li><a href='#" + x +"'>" + headz[x].innerText + "</a></li>";
    $("#menu").append(arrayOfHeaders[x])
    x++;
}
$("#menu").append("</ul>")

我需要一种方法将锚点附加到标题。

编辑：为了澄清 - 我需要的是为每个元素添加一个名称标签。应从'<h4>' header'</h4>'到'<h4 name="0">'...

编辑第一个标题

当然没有编辑html。

Answer 1

如果没有，则将ID设置为。

headz = document.getElementsByTagName("h4");
arrayOfHeaders=[];

x = 0;
y = headz.length;

var str = "<ul>";
while (x<y){
    var elem = headz[x];
    var id = elem.id || "heading_" + x;
    elem.id = id;
    str += "<li><a href='#" + id +"'>" + elem.innerText + "</a></li>";
    x++;
}
$("#menu").append( str + "</ul>");

和FYI innerText不是跨浏览器友好的。

jQuery解决方案

var str = "<ul>";
$("h4").each(
    function(i){
        var id = this.id || "header_" + i;
        this.id=id;
        str += '<li><a href="#' + id + '">' + this.innerHTML + '</a></li>';
    } 
);
str += "</ul>";
$("#menu").append(str);

Answer 2

既然你已经使用过jquery，那么我会把它写在其中：

var html = '<ul>';

$('h4').each(function (index, header) {
    html += '<li><a href="#' + header.id +'">' + header.html() + '</a></li>'; 
});

html += '</ul>';

$('#menu').append(html);

Answer 3

这可能会解决您的问题

headz = document.getElementsByTagName("h4");
arrayOfHeaders=[];

x = 0;
y = headz.length;

var html = "<ul>";
while (x<y){   
   html  += "<li><a href='#" + headz[x].id +"'>" + headz[x].innerText + "</a></li>";       
    x++;
}
$("#meny").append( html + "</ul>")

Answer 4

这个与rissicay的答案类似，但我认为它更简洁：

var html = []; // create an empty array to store iterated html in
// loop over every heading... 
$('h4').each(function(index) {
  // and add it to array previously created
  html.push("<li><a href='#" + index +"'>" + $(this).html() + "</a></li>");
  // add name attribute to heading
  $(this).attr('name', index);
});
// finally, append all to menu together with unordered list
$('#menu').append('<ul>' + html.join() + '</ul>');

基本上，尝试尽量减少dom操作（.append（）,. prepend（）,. html（））

Answer 5

我认为您所指的概念有时被称为“内部链接” - 请参阅第二部分“HTML链接 - ID属性”下的here。

现在看一下您的示例代码，您显然正在使用jQuery，那么为什么不充分利用它呢？

$("h4").each(function() {
   $("#links").append("<a href='#" + this.id + "'>link to " + this.id + "</a><br /><br />");
});

请参阅以下小提琴 - http://jsfiddle.net/r0k3t/PhrB6/

希望有所帮助。

添加锚点到标题？

5 个答案: