放入數組後丟失數組元素.innerHTML =「」

在我的HTML中，我有一個內容div，其中包含由php腳本創建的文章並使用JQuery和Javascript進行處理。使用Javascript，我使用'getElementsByClassName'函數將這些文章收集到一個數組中。我在這裏寫的腳本和HTML被簡化了。我需要這個數組，因爲我試圖做到這一點，如果數組的長度大於10，每頁只顯示10篇文章。因此第1頁將是數組索引0至9，第2頁索引10至19等。現在，放入數組後丟失數組元素.innerHTML =「」

請取這個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」，這是正確的..但第二個警告給我「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 = "";

我知道這是造成問題，但我不知道爲什麼。任何人都可以解釋或提供替代？

在此先感謝

來源

2012-10-19 Robbe

什麼元素具有ID'contentWrap'？ – SomeKittens

順便說一句：你已經有了jQuery，所以使用$（'＃article'）而不是document.getElementById。 –

如果你打算在之後清空內容，他們爲什麼插入它開始？只是'$（data）.find（'。article'）。length' – loganfsmyth

它看起來像document.getElementByClassName正在返回一個對元素數組的引用，當您更改標記時正在更新元素數組。不知道爲什麼;也許有人比我更瞭解情況可以回答這個問題。

使用jQuery選擇陣列工作對我來說：

var arrArticles = $(".article")

來源

2012-10-19 15:58:22

getElementsByClassName()返回一個動態數組（實際上是一個活的NodeList），將動態變化，如果/當你修改DOM。因此，如果使用innerHTML更改內容並且該數組中的元素受到影響，則該數組將自動更改。

如果你想保留這個元素列表並且使其不被改變（所以當DOM改變時它不會改變），你可以將NodeList複製到一個正常的數組中（這不是動態的），一旦它在一個正常的數組中，對DOM元素的引用將防止它們被破壞。如果代碼更改其內容，它不會阻止它們發生更改，但即使您的代碼導致它們從DOM中刪除，它也會阻止它們。使動態NodeList進入副本的靜態數組

一種方法是這樣的：

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

或者，因爲你的帖子被標記與jQuery，你可以使用jQuery中包含的第一個地方節點的靜態數組不受在DOM其他變化：

var items = $(".article");

來源

2012-10-19 15:51:40 jfriend00

感謝您的解釋。我明白你說的是什麼，但不是你的解決方案（沒有足夠的經驗）。艾倫他的解決方案，非常簡單，一個。 – Robbe

document.getElementsByClassName("article");

返回[節點列表陣列]，此陣列包含指向DOM元素

arrArticles = anotherArray;

此代碼不會創建另一個數組的副本，但它會創建一個指向另一個數組的值的指針。

所以當anotherArray中的元素將被刪除時，arrArticles元素也會消失。

來源

2012-10-19 15:57:43 VitVad

放入數組後丟失數組元素.innerHTML =「」

回答

相關問題