1 
$.each(data, function(i,item){
    var img = $('<img>');
    img.attr('src', item.thumb);
    img.attr('width', item.width);
    img.attr('height', item.height);
    o += '<li><a href="#">'+img+'<h3>'+item.title+'</h3><p>'+item.excerpt+'</p></a></li>';
});

以上输出

li>[object] <h3>title</h3><p>excerpt</p></li>

我的问题是图像标签。我知道我只是附加一个图像对象而不是元素......并且使用 appendto 会起作用，但在上述场景中，在一个循环中，我该如何完成这个。而不是显示 [object] 如何显示图像标签。

4

2 回答 2

2

这是修改 DOM 的糟糕方法。你应该使用普通的 DOM 方法，这样你就不会陷入这种混乱。

但是，如果您必须这样做。

导致的问题是对象toString()被隐式调用，指定返回对象的内部类在[object [[Class]]哪里。[[Class]]这就是为什么你得到而不是元素[object Object]的 HTML 。img

您可以像这样获得外部 HTML...

var imgOuterHtml = img.prop('outerHTML')
                   || '<img ' + 
                      []
                       .reduce
                       .call(img.prop('attributes'),
                             function(attrSerialised, attr) {
                                 return attrSerialised + 
                                        ' ' + attr.nodeName + 
                                        '="' + attr.nodeValue + '"';
                             },
                        '')
                       + '/>';

js小提琴。

new XMLSerializer().serializeToString(element)如果outerHTML属性不存在，您也可以使用它，但它只会返回 XML，例如空元素始终为空。

您还可以创建一个临时元素，例如 a div，设置它innerHTML，然后获取外部div的innerHTML。

但是，请不要这样做。使用 jQuery 封装的 DOM 修改方法。

于 2012-04-14T13:06:13.813 回答
0

您必须从对象中获取 html。有十几种或更多方法可以做到这一点。一种方法是img[0].outerHTML在 jQuery 选择器对象中为您提供原始 DOM 元素，然后是该元素的外部 html。


$.each(data, function(i,item){
    var img = $('<img>');
    img.attr('src', item.thumb);
    img.attr('width', item.width);
    img.attr('height', item.height);
    o += '<li><a href="#">'+img[0].outerHTML+'<h3>'+item.title+'</h3><p>'+item.excerpt+'</p></a></li>';
});
于 2012-04-14T13:08:24.197 回答