2

我尝试将两个节点列表合并为一个，但是当我在一个数组中连接时，有两次相同的节点。Concat 不搜索要插入的节点是否已存在于数组中...

var firstNodelist = document.querySelectorAll("#outter, #inner");
var finalArray = new Array();

for (var i = 0; i < firstNodelist.length; i++) {

    var secondNodelist = firstNodelist[i].querySelectorAll("div");

    var firstArray = new Array();

    for (var x = 0; x < secondNodelist.length; x++) {

        firstArray.push(secondNodelist[x]);

    }

    finalArray = finalArray.concat(firstArray)

}

console.log("FINAL", finalArray);

jsfiddle 示例

4

1 回答 1

3

与其在循环中构建第二个不必要的数组，不如使用该内部循环来检查节点是否已经在数组中（Array#indexOf在所有现代浏览器上），如果不是则只添加它。

var firstNodelist = document.querySelectorAll("#outter, #inner");
var finalArray = []; // `[]` rather than `new Array()`

for (var i = 0; i < firstNodelist.length; i++) {

    var secondNodelist = firstNodelist[i].querySelectorAll("div");

    for (var x = 0; x < secondNodelist.length; x++) {

        // Get this node
        var node = secondNodeList[x];

        // Is it in the array already?
        if (finalArray.indexOf(node) === -1) {
            // No, put it there
            finalArray.push(node);
        }

    }
}

console.log("FINAL", finalArray);

请务必测试您的目标环境以确保它们具有Array#indexOf.

话虽如此，对于这种特定情况有更好的方法： Live Example | 直播源

var finalArray = Array.prototype.slice.call(
    document.querySelectorAll("#outter div, #inner div")
);

...因为querySelectorAll不会多次包含同一个节点，即使在#inner内部#outter（反之亦然）。（这Array.prototype.slice.call(someObject)是从任何类似数组的对象中获取真正数组的技巧。）

于 2013-10-13T15:05:26.610 回答