Question

如何使用jQuery获取图像的html？

我想将此作为输出：

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

我正在尝试这个，但我得到一个空字符串（或null）：

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

以下返回对象，但我想要html

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

我该怎么做？

如果我尝试

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

我得到了正确的图像来源（pokerface.png），所以我知道它是正确的元素。

Answer 1

jQuery("#user-dialog .product-item img").get(0).outerHTML;

Answer 2

您正在有效地寻找outerHTML（在那些支持它的浏览器中）：

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

JS Fiddle demo

当然，这将返回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 Fiddle demo

请注意，上面的内容返回一个数组，而通常，jQuery getter仅返回匹配集的 first 元素的结果，如果这是你更喜欢的那么你可以改变最后一行的插件：

return _h[0];

JS Fiddle demo

哦，显然（比如.text()和其他getter方法）这个explitly无法链接，因为它返回一个数组或一个字符串（如果你喜欢），不 jQuery对象。

参考文献：

jQuery的：
- get()。
- map()。
'普通'JavaScript：
- Array.push()。
- document.createElement()。
- Node.appendChild()。
- Node.cloneNode()。
- outerHTML。
- outerHTML compatibility。

Answer 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?

jQuery将图像的HTML作为字符串

3 个答案: