1

我有一个非常大的 html 文档，由许多<h4>标题和一个简短<p>的“正文”组成。

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

我正在遍历标题，并将它们添加到 menu-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。

4

5 回答 5

2

如果没有，则将 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>");

并且仅供参考 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);
于 2012-12-28T14:13:15.107 回答
1

由于您已经使用过 jquery，因此认为 id 将其全部写入其中：

var html = '<ul>';

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

html += '</ul>';

$('#menu').append(html);
于 2012-12-28T14:19:03.757 回答
0

这个类似于 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()）

于 2012-12-28T14:35:21.313 回答
0

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

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

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

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

希望有帮助。

于 2012-12-28T14:37:35.767 回答
0

这可能会解决您的问题

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>")
于 2012-12-28T14:13:36.547 回答