javascript - 如何在特定子元素上使用 jquery 的 html()

Question

我正在尝试对html()特定的孩子使用 jquery 的功能，例如：

<div id="main">
  <p>I am p tag</p>
  <span> i am span tag</span>
</div>

现在，如果我们$("#main").html()同时使用它p，span但如果我只想要p，我该怎么办？

Answer 1

尝试如下，

$("#main p").html()

这会给我我是 p 标签，但我想要<p> I am p tag</p>

试试下面的outerHTML，

$('#main p')[0].outerHTML

或者你可以把它做成 jQuery 函数，这样你就可以链接。

jQuery.fn.outerHTML = function(s) {
    var _this = this[0];
    return _this.outerHTML?_this.outerHTML:(s ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html());
};

$('#main p').outerHTML()

演示：http: //jsfiddle.net/skram/PMjKR/1/

参考： 获取选定元素的外部 HTML

Answer 2

许多方法取决于您的确切要求。

标准 CSS 选择器：

$('#main p').html();

过滤儿童。

$('#main').children('p').html();

通过获取 main 的第一个孩子

$('#main:first-child').html();

在看到 OP 对另一个答案的评论后进行编辑 ，我将简单地添加 html() 替换为 [0].outerHTML 的位置

在这里查看选择器