Javascript 放置.innerHTML=”后数组元素丢失&引用；_Javascript_Jquery_Html_Arrays

Javascript 放置.innerHTML=”后数组元素丢失&引用；

javascript jquery html arrays

Javascript 放置.innerHTML=”后数组元素丢失&引用；,javascript,jquery,html,arrays,Javascript,Jquery,Html,Arrays,在我的HTML中，我有一个content div，其中包含由php脚本创建并使用JQuery和Javascript处理的文章。使用Javascript，我使用“getElementsByClassName”函数将这些文章收集到一个数组中。我在这里编写的脚本和HTML都是简化的。我需要这个数组，因为我试图使数组的长度大于10，那么每页只显示10篇文章。因此，第1页将是数组的索引0到9，第2页将是索引10到19，以此类推。现在, 以这个html代码为例 <body> <div

在我的HTML中，我有一个content 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>

第一个警报为“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>"

我知道这是造成问题的原因，但我不知道为什么。有人能解释或提供替代方案吗

提前感谢

getElementsByClassName（）

返回一个动态数组（实际上是一个活动的

节点列表

），如果/当您修改DOM时，该数组将动态更改。因此，如果您使用innerHTML更改内容，并且该数组中的元素受到影响，那么该数组将自动更改

如果您希望保留此元素列表并使其不处于活动状态（因此在DOM更改时它不会更改），则可以将节点列表复制到普通数组中（这不是动态的），一旦它位于普通数组中，对DOM元素的引用将使它们不会被破坏。如果您的代码更改了它们的内容，它不会阻止它们被更改，但是即使您的代码导致它们从DOM中删除，它也会保留它们

将动态

节点列表

复制到静态数组中的一种方法如下：

// 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");

return[NodeList array]，此数组包含指向DOM元素的指针

arrArticles = anotherArray;

这段代码不创建另一个数组的副本，但可以创建指向另一个数组中的值的指针

因此，当另一个数组中的元素被删除时，arrArticles中的元素也将消失。

看起来像是document.getElementByClassName返回了对元素数组的引用，当您更改标记时，该数组将被更新。不知道为什么；也许有比我更了解情况的人能回答这个问题

使用jQuery选择适合我的数组：

var arrArticles = $(".article")

哪个元素的id为

contentWrap

？顺便说一句：您已经有了jQuery，所以使用$（'#article'）而不是document.getElementById。如果要在之后清空内容，他们为什么要先插入它？只需

$（数据）。查找（'.article'）。长度

感谢您的解释。我理解你说的，但不是你的解决方案（经验不足）。艾伦用了他的解决方案，非常简单。

document.getElementsByClassName("article");

arrArticles = anotherArray;

var arrArticles = $(".article")