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 回答