9

jQueryで画像のhtmlを取得するにはどうすればよいですか?

これを出力として欲しい：

<img src="pokerface.png" alt="pokerface" />

私はこれを試していますが、空の文字列 (または null) を取得しています:

var imageHtml = $("#user-dialog .product-item img").html();

以下はObjectを返しますが、html が必要です

var imageHtml = $("#user-dialog .product-item img")

それ、どうやったら出来るの？

私が試してみると 

var imageHtml = $("#user-dialog .product-item img").attr("src");

画像 ( ) の正しいソースを取得したpokerface.pngので、それが正しい要素であることがわかります。

4

3 に答える 3

17 
jQuery("#user-dialog .product-item img").get(0).outerHTML;
于 2013-07-07T21:46:08.007 に答える
5

あなたは効果的にouterHTML（それをサポートするブラウザで）探しています：

var imageHtml = $("#user-dialog .product-item img").map(function(){
        return this.outerHTML;
    }).get();

JS フィドルのデモ。

もちろん、これはimg要素の HTML の配列を返します。これにより、jQuery は、ブラケット表記インデックスを使用したり使用したりして、一致したセットを明示的に反復するのではなく、関連するすべての情報を照合できます。get()[n]

そして、一致した要素を取得するための単純な (真剣に、非常に単純な) プラグイン:outerHTML

(function ($) {
    $.fn.htmlOuter = function () {
        var self = this,
            len = self.length,
            _tmp = document.createElement('div'),
            _h = [];
        for (var i = 0; i < len; i++) {
            _tmp.appendChild(self[i].cloneNode());
            _h.push(_tmp.innerHTML);
            _tmp.innerHTML = '';
        }

        return _h;
    };
})(jQuery);

var images = $('img').htmlOuter();
console.log(images);

JS フィドルのデモ。

上記は配列を返すことに注意してください。通常、jQuery getter は一致したセットの最初の要素からのみ結果を返します。それが望ましい場合は、プラグインの最終行を次のように変更できます。

return _h[0];

JS フィドルのデモ。

ああ、明らかに (.text()および他の getter メソッドのように) これは、jQuery オブジェクトではなく、配列または文字列 (必要に応じて) を返すため、明示的にチェーンすることはできません。

参考文献:

于 2013-07-07T21:48:07.850 に答える
3

イメージがコンテナー内の唯一の要素である場合は、次のようにすることができます。 

$("#user-dialog .product-item img").parent().html();

それ以外の場合は、ダミー要素を作成し、それに img オブジェクトを追加して .html() 値を取得できます。 

$('<div>').append($("#user-dialog .product-item img").clone()).html();

解決策はここで提案されて
います How do you convert a jQuery object into a string?

于 2013-07-07T21:51:43.007 に答える