11

我正在尝试合并两个由 html 对象组成的数组。出于某种原因，使用 .concat() 对我不起作用。

这是一个简单的笔来演示这个问题：http ://codepen.io/anon/pen/kIeyB

注意：我尝试搜索远程类似的东西，但没有找到可以回答我的问题的东西。

我认为您可以使用 for 循环以经典的方式做到这一点，但我宁愿不重新发明轮子。

var x = document.getElementById("hello");
var items = x.getElementsByClassName("one");
//alert(items.length);
var items2 = x.getElementsByClassName("two");
//alert(items2.length);
items = items.concat(items2);
//alert(items.length);
4

4 回答 4

10

itemsanditems2是nodeList或HTMLCollection对象，而不是数组。它们不包含.concat()方法。它们有一个.length属性并支持[x]索引，但它们没有其他数组方法。

将它们复制到实际数组中的常见解决方法如下：

// convert both to arrays so they have the full complement of Array methods
var array1 = Array.prototype.slice.call(x.getElementsByClassName("one"), 0);
var array2 = Array.prototype.slice.call(x.getElementsByClassName("two"), 0);
于 2014-06-10T05:20:02.707 回答
4

这也可以这样做：

var allitems = [];
allitems = Array.prototype.concat.apply(allitems, x.getElementsByClassName("one"));
allitems = Array.prototype.concat.apply(allitems, x.getElementsByClassName("two"));

该allitems变量将是一个Array包含所有带有one&类的元素的 javascript two。

于 2017-01-13T00:29:15.777 回答
1

document.getElementsByClassName不返回数组。它返回具有长度属性的 NodeList。

于 2014-06-10T05:10:50.410 回答
1

你所拥有的是 HTMLCollections，它虽然表现得像数组，但不是数组。见这里：https ://developer.mozilla.org/en/docs/Web/API/HTMLCollection ：

..集合是一个代表 DOM 节点列表的对象。

在您的情况下，您可以将这些对象连接到一个新数组中：

var itemsnew;
var x = document.getElementById("hello");
var items = x.getElementsByClassName("one");
var items2 = x.getElementsByClassName("two");
itemsnew = Array.prototype.concat.call(items, items2);

现在，如果您：

console.log(itemsnew);

将返回：

[HTMLCollection[1], HTMLCollection[1]]

和：

console.log(itemsnew[0][0]);

将返回：

<div class="one"></div>
于 2014-06-10T05:26:41.187 回答