Question

我查询DOM获取具有特定标记（项目）的所有appendChild元素，并将它们存储在数组中。然后我克隆了该数组，并将该克隆的2个副本连接到数组，基本上将元素数量从20增加到60.所以在我完成后，我有一个包含60个元素的新数组。当我尝试遍历这60个元素并用父div包围它们中的每个6时，function buildProductsList_() { var concatNumber = 1; cloneItemArray = baseItemElementsByAttribute.slice(); if (baseItemElementsCount % baseItemElementsPerSlide == 0) { return false; } while (baseItemElementsCount * concatNumber % baseItemElementsPerSlide != 0) { concatNumber++; } for (i = 0; i < concatNumber; i++) { newItemList = newItemList.concat(cloneItemArray); } newItemListCount = newItemList.length; offsetFrameCount = newItemListCount % baseItemElementsPerSlide; } function constructCarouselSlides_() { for (i = 0; i < newItemListCount; i += baseItemElementsPerSlide) { var offset = baseItemElementsPerSlide; if (offsetFrameCount + i == newItemListCount) { offset = offsetFrameCount; } var section = newItemList.slice(i, i + offset); var itemsClones = itemsInstance.cloneNode(); for (j = 0; j < section.length; j++) { itemsClones.appendChild(section[j]); } carouselContainer.appendChild(itemsClones); } }方法将不会附加连接到数组的副本。它只适用于我假设来自原始克隆的原始版本。

import numpy as np

a = np.array([[0, 1, 0, 0, 0, 0],
              [0, 1, 0, 0, 0, 0],
              [0, 1, 0, 0, 0, 0],
              [0, 0, 0, 0, 3, 0],
              [2, 2, 0, 0, 0, 0],
              [2, 2, 0, 0, 0, 0]])

# If the array was computed using scipy.ndimage.measurements.label, you
# already know how many labels there are.
num_labels = 3

nz = np.nonzero(a)
coords = np.column_stack(nz)
nzvals = a[nz[0], nz[1]]
res = {k:coords[nzvals == k] for k in range(1, num_labels + 1)}

请参见屏幕截图：前6个项目元素没有附加任何项目元素。它似乎只对最初的20项元素起作用。任何帮助将不胜感激。

DOM的屏幕截图 https://www.dropbox.com/s/55n0y8j7ezet1u7/Screen%20Shot%202015-09-23%20at%203.00.50%20PM.png?dl=0

Answer 1

使用.slice()制作DOM元素数组的副本不会创建新的DOM元素。它只是创建了第二个数组，其中包含对同一组DOM元素的引用。因此，当您尝试从克隆数组中追加那些相同的DOM元素引用时，它只是将它们从原来的位置移开。

如果需要新创建的DOM元素的新数组，则必须克隆数组中的每个元素以实际创建一组新的DOM元素。这是一个克隆DOM节点数组的函数：

function cloneDOMArray(arr) {
    return arr.map(function(item) {
        return item.cloneNode();
    });
}

它返回一个克隆节点数组。

更多说明：

这是Javascript的核心，通过复制值来赋予诸如数字或布尔值之类的原语。

var a = 2;
var b = a;
a = 3;
console.log(a);   // 3 (shows the newly assigned value)
console.log(b);   // 2 (it has a copy of the original value of a)

但是，Javascript中的对象（包括DOM对象）由指针分配：

var x = document.createElement("div");
x.innerHTML = "Hello";
var y = x;
x.innerHTML = "Goodbye";
console.log(y.innerHTML);   // "Goodbye"
console.log(x.innerHTML);   // "Goodbye"

因此，当您将一个对象分配给两个不同的变量时，每个变量都指向完全相同的对象。如果修改该对象，您将看到通过两个变量进行修改（因为它们都指向完全相同的对象）。

因此，如果您有一个DOM元素引用数组，然后使用.slice()创建该数组的副本，那么您将只有两个数组，其中包含完全相同的DOM元素引用集。

var x = document.getElementById("one");
var y = document.getElementById("two");
var items = [x,y];
var copyItems = items.slice(0);
console.log(items[0] === copyItems[0]);    // true, same element reference

因此，当您将对象分配给第二个变量并且您希望第二个变量包含该对象的副本时，您必须明确地创建一个副本。如何最好地制作副本取决于对象（对于DOM元素引用数组与其他数组的数组，您将采用不同的方式）。

Append Child不会对连接数组项起作用

1 个答案: