檢查在一個jQuery對象

Question

返回的DOM元素我有：

<p>Paragraph One</p> 
<p>Paragraph Two</p> 
<script src="http://www.google.com/jsapi"></script> 
<script> 
google.load("jquery", "1"); 
</script> 
<script> 
var x = $('p'); 
x.each(function(index) { 
    $('body').append($(this).html().replace('<','&lt;') + '<br>'); 
}); 
</script> 

我期望看到：

&lt;p>Paragraph One&lt;/p><br> 
&lt;p>Paragraph Two&lt;/p><br> 

而是p標籤本身丟失。

我想讓我的輸出看起來像console.log，它將x標識爲兩（2）段元素。

它在段落中獲取html，但console.log顯示它爲段落。所以我想我需要升到一個水平，然後再回落？

Answer 1

這是因爲$(this).html()只會給你<p>元素的內容，而不是元素本身。

這樣做：

var x = $('p'); 
x.each(function(index) { 
    var p_html = this.outerHTML || $('<div>').append($(this).clone()).html(); 
    $('body').append(p_html.replace('<','&lt;') + '<br>'); 
}); 

這需要每個<p>元素，並得到其財產.outerHTML（就像innerHTML但包括業主的標籤爲好）。

如果.outerHTML屬性不受支持（我看你的Firefox！）然後它使用clone()^[docs]方法，使<p>的克隆，它增加了一個新的<div>和得到的的.html()<div>。