2

私の HTML には、php スクリプトによって作成され、JQuery と Javascript で処理される記事を含むコンテンツ div があります。Javascript では、これらの記事を「getElementsByClassName」関数で配列に収集します。ここで書いているスクリプトと HTML は単純化されています。配列の長さが 10 より大きい場合、ページごとに 10 個の記事のみが表示されるようにしようとしているため、この配列が必要です。したがって、ページ 1 は配列のインデックス 0 から 9 になり、ページ 2 はインデックス 10 から 19 になります。

このhtmlコードを取ります。

<body>
<div id="content">
  <div class="article">
    <p>Article 1</p>
  </div>
  <div class="article">
    <p>Article 2</p>
  </div>
  <div class="article">
    <p>Article 3</p>
  </div>
</content>
</body>

そして、このJavascriptコード。

$.post("getarticles.php",{ page:"home" } ,function(data){
        //place the content
        document.getElementById("content").innerHTML = jQuery.trim(data);

        //put elements in array
        arrArticles = document.getElementsByClassName("article");
        alert(arrArticles.length);

        document.getElementById("content").innerHTML = "";
        alert(arrArticles.length);
})

最初のアラートでは「3」が表示されますが、これは正しいです..しかし、2 番目のアラートでは「0」が表示されます。要素が配置された後に配列の要素が失われるのはなぜですか?

ちなみに、「data」変数は、php スクリプトによって渡される HTML の文字列です。例：phpスクリプトにはコードがあります

echo "<div class="article"><p>Article 1</p></div><div class="article"><p>Article 2</p></div><div class="article"><p>Article 3</p></div>"

&

document.getElementById("contentWrap").innerHTML = "";

これが問題の原因であることはわかっていますが、その理由はわかりません。誰かが代替案を説明または提供できますか?

前もって感謝します

4

3 に答える 3

10

getElementsByClassName()NodeListDOM を変更した場合に動的に変更される動的配列 (実際には live ) を返します。そのため、innerHTML でコンテンツを変更し、その配列内の要素が影響を受ける場合、配列は自動的に変更されます。

この要素のリストを保持し、ライブにしない (DOM が変更されても変更されないようにする) 場合は、NodeList のコピーを通常の配列 (動的ではない) に作成し、一度が通常の配列にある場合、DOM 要素への参照により、DOM 要素が破棄されなくなります。コードによって内容が変更された場合でも、それらが変更されるのを防ぐことはできませんが、コードによってそれらが DOM から削除されたとしても、保持されます。

NodeList動的配列を静的配列にコピーする 1 つの方法は次のとおりです。

// fetch dynamic NodeList
var items = document.getElementsByClassName("article");
// make static copy of NodeList into normal array
items = Array.prototype.slice.call(items);

または、投稿は jQuery でタグ付けされているため、DOM の他の変更の影響を受けないノードの静的配列を含む最初の場所で jQuery を使用できます。

var items = $(".article");
于 2012-10-19T15:51:40.787 に答える
1

document.getElementByClassName は、マークアップを変更すると更新される要素配列への参照を返しているようです。理由はわかりません。おそらく、私よりも詳しい人がそれに答えることができます。

jQueryを使用して配列を選択すると、うまくいきました：

var arrArticles = $(".article")
于 2012-10-19T15:58:22.367 に答える
0 
document.getElementsByClassName("article");

[NodeList 配列] を返します。この配列には DOM 要素へのポインタが含まれます

arrArticles = anotherArray;

このコードは anotherArray のコピーを作成しませんが、anotherArray からの値へのポインターを作成します。

そのため、anotherArray の要素が削除されると、arrArticles の要素も消えます。

于 2012-10-19T15:57:43.053 に答える