jquery - jquery中获取$(this)的完整值包括标签和属性

Question

这个问题已经有答案了:

jQuery get html of container including the container itself (10 个回答)

已关闭 9 年前。

我有一堆带有数据属性的元素:

<span data-product_attribute="title" data-product_id="12">product title</span>
<span data-product_attribute="vendor" data-product_id="12">product vendor</span>

我使用 jQuery 选择器来获取它们并将它们放入列表中进行处理:

$('span[data-product_attribute]').map(function() {
    var o = {};
    o.name = $(this).attr("data-product_attribute");
    o.value = $(this).html(); // ** this line is not what I want **
    return o;
}).get()

html()方法仅返回 <span> 中包含的内容标签，但我想要的是整个事情。即我试图让它做到这一点:

o.value = '<span data-product_attribute="title" data-product_id="12">product title</span>'

是否有一个 jQuery 方法可以返回 $(this) 表示的所有内容？

Answer 1

您需要元素的“outerhtml”。某些浏览器可以通过 .outerHTML 属性提供此功能。

如果做不到这一点，my answer 中有一个简单的插件可以解决这个问题。相关问题:

(function($) {
    $.fn.outerhtml = function() {
        return $('<div/>').append(this.clone()).html();
    };
})(jQuery);