jQuery append 不起作用

Question

我有以下代码：

for ( j = 0; j < albums[0].imagesNumber; j++ ) {
    k = albums[0].imagesNumber * 170;
    $('.body-album-expanded-inner').css({ width: k + 'px' });
    document.getElementsByClassName('body-album-expanded-inner')[0].
    appendChild(albumsImages[0][j]);
}

其中albumsImages包含一些images，albums[].imagesNumber只是告诉我一个album中存在多少图像。当我使用 javascript 的 appendChild 时，一切正常，但是当我使用 jQuery 的 append 时，如下所示：

$('.body-album-expanded-inner')[0].
    append(albumsImages[0][j]);

它给了我这个错误：

TypeError: $(...)[0].append is not a function

Answer 1

这是因为您使用的是转换为本机 DOM 元素的索引器。使用eq(0)或first()

$('.body-album-expanded-inner').eq(j). // or simply first()
    append(albumsImages[0][j]);

另一种选择是用jQuery再次包装它，但这是一个过度的杀戮。无论如何

$($('.body-album-expanded-inner')[j]). //now it's jQuery since its wrapped inside $()
    append(albumsImages[0][j]);

如果它是单个元素，那么你不需要任何东西，那么只需使用append

jQuery接受原生 DOM 元素并给出jQuery对象，该对象具有诸如 append 的方法，但不是appendChild，同样原生元素不会有jQuery特定的方法，例如 append，而只有appendChild。

Answer 2

下面还有更多解释。

这是 DOM 元素对象

document.getElementsByClassName('body-album-expanded-inner')[0]

它有很多为DOM元素定义的方法，如appendChild、removeChild等。

然后是jQuery函数构造函数。jQuery的实例不是一个DOM元素，它只是一些自定义对象，碰巧与DOM元素一起工作，包装它们。这些jQuery对象在jQuery函数原型jQuery.fn.prototype上定义了许多有用的方法。例如append、text、after等等。

jQuery实例对象是一个类似数组的集合，这意味着你可以访问单个DOM元素，就好像jQuery对象是一个数组一样。所以

$('.body-album-expanded-inner')[0]

再次是DOM元素（而$('.body-album-expanded-inner')是jQuery对象），当然没有jQuery方法。

为了能够使用jQuery方法，应该为此使用jQuery实例。将 DOM 元素或 DOM 元素的 NodeList 集合包装到$()构造新的 jQuery 实例，该实例具有所有必要的方法。