實例

找到段落中的所有文本節(jié)點，并用粗體標(biāo)簽包裝它們。

$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");

親自試一試

定義和用法

contents() 方法獲得匹配元素集合中每個元素的子節(jié)點，包括文本和注釋節(jié)點。

語法

.contents()

詳細(xì)說明

如果給定表示 DOM 元素集合的 jQuery 對象，.contents() 方法允許我們檢索 DOM 樹中的這些元素的直接子節(jié)點，并用匹配元素構(gòu)造新的 jQuery 對象。.contents() 和 .children() 方法類似，不同的是前者在結(jié)果 jQuery 對象中包含了文本節(jié)點以及 HTML 元素。

.contents() 方法也可以用于獲得 iframe 的內(nèi)容文檔，前提是該 iframe 與主頁面在同一個域。

請思考下面這個帶有一些文本節(jié)點的 <div>，每個節(jié)點被兩個折行元素 (<br />) 分隔：

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  <br /><br />
  Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat.
  <br /> <br />
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur.
</div>

我們可以使用 .contents() 方法來把文本塊轉(zhuǎn)換為形式良好的段落：

$('.container').contents().filter(function() {
  return this.nodeType == 3;
})
  .wrap('<p></p>')
.end()
.filter('br')
  .remove();

親自試一試

這段代碼首先會接收 <div class="container"> 的內(nèi)容，然后濾過其文本節(jié)點，將文本節(jié)點封裝入段落標(biāo)簽中。這是通過測試元素的 .nodeType 屬性實現(xiàn)的。該屬性存有指示節(jié)點類型的數(shù)字代碼；文本節(jié)點使用代碼 3。內(nèi)容會被再次過濾，這次針對 <br /> 元素，這些元素會被移除。