1

短い「本文」<h4>を伴う多数のヘッダーで構成される非常に大きなhtmlドキュメントがあります。<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を編集せずに。

4

5 に答える 5

2

IDがない場合は、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>");

また、FYIinnerTextはクロスブラウザフレンドリーではありません。

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

これはあなたの問題を解決するかもしれません

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 に答える
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

あなたが参照している概念は、「内部リンク」として知られていることもあると思います。2番目のセクション「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 に答える