我尝试将两个节点列表合并为一个,但是当我在一个数组中合并时,同一节点有两次。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);
与其在循环内构建另一个不必要的数组,不如使用该内部循环来检查节点是否已经在数组中(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
。
话虽如此,有应该是一个更好的方法的具体情况:活生生的例子| 现场直播
var finalArray = Array.prototype.slice.call(
document.querySelectorAll("#outter div, #inner div")
);
...因为querySelectorAll
相同的节点即使在#inner
内部也不会多次包含#outter
(反之亦然)。(这Array.prototype.slice.call(someObject)
是从任何类似数组的对象中获取真实数组的技巧。)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句