jQuery将图像的HTML作为字符串获取

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 方法）这显然不能被链接，因为它返回一个数组或字符串（如果你愿意的话），不是 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?