Question

我知道我可以在标签中包装它的.html（），但元素本身有一个动态设置的id，类等。如何让jQuery返回包含它自身的元素标记？

Answer 1

这样做会很好：

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

Answer 2

据我所知，jQuery中没有直接支持“outerHTML”，但您可以编写一个函数来模拟它（在IE以外的浏览器中），或者使用this plugin：

// this will return the element and it's mark-up, of an element
// with the id myTag
var outer = $('#myTag').outerHTML();

显然Brandon不是唯一的实现..我相信你也可以提出其他聪明的实现..

修改的

如果你热衷于避免追加电话，也许你可以尝试这样的事情......

function getOuterHTML(el)
{   
    var wrapper = '';

    if(el)
    {
        var inner = el.innerHTML;
        var wrapper = '<' + el.tagName;

        for( var i = 0; i < el.attributes.length; i++ )
        {
            wrapper += ' ' + el.attributes[i].nodeName + '="';
            wrapper += el.attributes[i].nodeValue + '"';
        }
        wrapper += '>' + inner + '</' + el.tagName + '>';
    }
    return wrapper;
}


// now, to replicate the sample above
var outer = getOuterHTML($('#myTag'));

唯一的问题是，我不确定所有浏览器是否都支持属性数组..但我知道mozilla家族的那些，并且IE对nativeHTML有本机支持..试一试（对于那些不支持您可以使用上一个使用追加的方法的属性数组

Answer 3

嗯，你不需要使用插件，我相信你可以试试

// this uses the jquery selectors, then returns the DOM element, 
// which then u can use the standard outterHTML...
$('#myelement').get(0).outerHTML;

编辑：如果你的jquery选择器匹配多个项目，你可以循环它们，参考jquery文档中的例子

Answer 4

This blog post可能会对您有所帮助。

他描述了一种看起来像这样的技术：

var html = $('<div>').append($('#top').clone()).remove().html()

这克隆了感兴趣的div，将它附加到包装器div，然后获取包装器的html - 这相当于第一个div的原始html。

他最初在声明的包装div中围绕它的建议似乎是一种更好的方法。那你就不需要为这一切烦恼了。

Answer 5

没有任何代码，选择元素，选择第一个内部元素，获取其父元素（您想要的元素），然后将其包装在youElement.html（）的原始选择中。

Answer 6

这个问题迟到了。如果使用jQuery查找对象，可以使用以下代码获取outerHTML。

HTML：

<div class="obj">
    <a href="#" class="link">Link</a>
</div>

jQuery的：

var $obj = $('.obj .link');
var outerHTML = $obj[0].outerHTML;

这将输出<a href="#" class="link">Link</a>。在最新的Chrome，最新的Firefox和IE11上测试过。以下是codepen的链接：http://codepen.io/aj372/pen/ZLmYbj

如何使用jQuery获取元素的标记，包括自身？

6 个答案: