jQuery将图像的HTML作为字符串

Question

如何使用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),所以我知道它是正确的元素.

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小提琴演示.

当然,这将返回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方法一样)这个explitly无法链接,因为它返回一个数组,或一个字符串(如果你喜欢),而不是 jQuery对象.

参考文献:

• jQuery的:
  • get().
  • map().
• '普通'JavaScript:
  • Array.push().
  • document.createElement().
  • Node.appendChild().
  • Node.cloneNode().
  • outerHTML.
  • outerHTML兼容性.

Answer 3

如果图像是容器内的唯一元素，您可以这样做：

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

否则，您可以创建一个虚拟元素并将 img 对象附加到它以获取 .html() 值。

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

这里提出了解决方案
How do you conversion a jQuery object into a string?