将元素动态附加到另一个动态元素

Question

我想将变量 img 附加到 figure 元素。一切都是从 JSON 文件动态加载的。一切似乎都很好，除非我必须将元素附加到现有的$wrap

for (i = 0; i < arr.length; i++) {
  var url = arr[i].url,
      img = $('<img src="'+ url +'">').load(function(){
          var imgW = this.width,
              imgH = this.height;

          img.attr({
              width: imgW,
              height: imgH
          });
      });

  $wrap.append( '<figure>' + img + '</figure>' );
}

当我执行$wrap.append( img ); 时，一切正常。该元素附加到$wrap。 问题 是我不必将它们附加到$wrap，但它们中的每一个（根据数组长度）必须附加到其正确的<figure> 标签，所以当我执行此代码时：$wrap.append( '<figure>' + img + '</figure>' ); 这是我想要的，输出是：<figure>[object Object]</figure>。

有什么建议吗？ 如何将一个动态创建的元素附加到另一个动态创建的元素上？

你可以找到代码here

和here

Answer 1

试试看：

$wrap.append($('<figure/>').append(img));

'<figure>' + img + '</figure>' 是 string + Object + string。 Js 会将结果作为字符串返回，这意味着它将调用.toString() 函数将每个不是字符串的变量转换为字符串。 img 是一个 jQuery 对象而不是一个字符串，所以 img.toString() 将被调用，其结果是 [object Object]