javascript - 特定の子要素に対してjqueryのhtml（）を使用する方法

Question

私はhtml()次のような特定の子に対してjqueryの関数を使用しようとしています：

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

今、それを使用すると$("#main").html()両方が得られますが、必要な場合は、どうすればよいですか？pspanp

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:first-child').html();

OPによる別の回答へのコメントを見た後、編集 します。html（）が[0].outerHTMLに置き換えられる場所を追加します。

ここでセレクターを参照してください