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的追加时这样：

$('.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 1}}具体方法，例如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元素或DOMList元素的NodeList集合包装到$()构造新的jQuery实例，它具有所有必要的方法。

jQuery追加不起作用

2 个答案: