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を使用しても機能しますが、上記のシナリオでは、ループで、どうすればこれを達成できますか。[オブジェクト] を表示する代わりに、イメージ タグを表示するにはどうすればよいですか。

4

2 に答える 2

2

これは DOM を変更する方法としては不適切です。この混乱に巻き込まれないように、通常の DOM メソッドを使用する必要があります。

ただし、そのようにしなければならない場合。

原因となる問題は、オブジェクトの内部クラスである場所toString()を返すように指定されているオブジェクトが暗黙的に呼び出されていることです。そのため、要素の HTML の代わりに取得します。[object [[Class]][[Class]][object Object]img

次のように外側の HTMLを取得できます...

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

jsFiddle .

プロパティが存在しないnew XMLSerializer().serializeToString(element)場合にも使用できるように見えますが、XML のみを返します。たとえば、空の要素は常に空です。outerHTML

などの一時的な要素を作成し、それdivを設定してinnerHTMLから、外側divのを取得することもできますinnerHTML。

しかし、どうか、このようにしないでください。jQuery のラップされた DOM 変更メソッドを使用します。

于 2012-04-14T13:06:13.813 に答える
0

オブジェクトからhtmlを取得する必要があります。それを行うには、十数以上の方法があります。1 つの方法は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 に答える