使用jQuery获取整个开始标记

Question

我们说HTML是:

<div id="page" class="someclass"> more divs </div>

如何使用ID在HTML中显示整个开始标记及其属性(但不是结束标记)？例如:

$('#page').tag();

然后会返回:

<div id="page" class="someclass">

Answer 1

您始终可以使用DOM元素属性outerHTML

$(selector)[0].outerHTML

它只是获取选择的第一个DOM元素,然后使用DOM属性outerHTML获取html

编辑如果您不想要内容而只需要封闭标签,则可以执行此操作

$.fn.tag = function(){
    return this[0].outerHTML.replace(this.html(),"");
};

或者如果你只想要开始标记

$.fn.startTag = function(){
    return this[0].outerHTML.split(this.html())[0];
};

然后,您可以像这样使用它来获取封闭标记

$("#page").tag();

或者像这样得到开始标记

$("#page").startTag();

Answer 2

您可以定义一个返回outerHTML属性的jQuery方法。

$.fn.tag = function() {
   return this.first().clone().empty().prop('outerHTML');
}

$('#page').tag();

http://jsfiddle.net/w2FAb/

要删除结束标记：

$.fn.tag = function() {
   var r = this[0].nodeName.toLowerCase();
   return this.first()
              .clone()
              .empty()
              .prop('outerHTML')
              .replace('</'+r+'>', '');
}

对于多个选定元素，以下内容返回一个数组：

$.fn.tag = function() {
   return this.map(function() {
      var r = this.nodeName.toLowerCase();
      return $(this).clone()
                    .empty()
                    .prop('outerHTML')
                    .replace('</'+r+'>', '');
   }).get();
}