2

在我的 HTML 中，我有一个内容 div，其中包含由 php 脚本创建并使用 JQuery 和 Javascript 处理的文章。使用 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”，这是正确的。但第二个警报给我“0”。为什么在将元素放入其中后数组会丢失其元素？

顺便说一句，“数据”变量是一个由 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()返回一个动态数组（实际上是一个 live 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-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 回答