0

追加する前にこのJavaScript関数を試してみましa.className = "year";たが、すべて正常に機能しましたが、追加すると、SafariでもGoogle Chromeでもページをロードできませんでした。私がする必要があるのは、新しいa要素にクラスを追加することだけです。私も試してみましa.setAttribute("class", "year");たが、同じエラーが発生しました:ページが読み込まれません..誰かが私を助ける方法を知っていたら、私はとても感謝しています!

function create_timeline() {

    timeline = document.getElementById("timeline_ul");
    years = document.getElementsByClassName("year");
    for (i=0;i<years.length;i++) {
        if (years.item(i).nodeType==1) {
            year = years.item(i).innerHTML;
            a = document.createElement("a");
            a.innerHTML = year;
            a.className = "year";
            timeline.appendChild(a);
        }
    }

}
4

1 に答える 1

1

しかし、同じエラーが発生しました:ページが読み込まれません..

問題は、コードが無限ループで実行されることです。その理由は次のとおりです。

  1. 以下の呼び出しで、クラス「年」を持つすべての要素をフェッチしました。返されるコレクションは動的コレクションです

    years = document.getElementsByClassName("year");

  2. コレクションを反復しながら、新しいアンカー要素を作成し、それらに「年」クラスを設定しています。

  3. それらをドキュメントに追加すると、最初のステップで作成されたコレクションに自動的に追加されます。これは動的コレクションであるためです。新しい要素はコレクションの「件名」(ここではクラス「年」) と一致するためです。

無限ループを避けるために、多くの可能性があります。

  1. 長さプロパティを変数にキャッシュする

    var i=0, len = years.length;i<len;i++

ただし、このアプローチでは、新しい要素がコレクションに追加されるのか、「論理的」または「ランダム」な順序で追加されるのかを確認できません。

  1. コレクションを JavaScript 配列に変換する

    years = document.getElementsByClassName("year");
years = Array.prototype.slice.call(years, 0);

  2. または、要素の静的コレクションを返す document.querySelectorAll を使用します。

    years = document.querySelectorAll('.year');

私はアプローチ＃2または＃3に行きます。

于 2012-02-18T17:11:08.707 に答える