實(shí)例

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

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

親自試一試

定義和用法

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

語(yǔ)法

.contents()

詳細(xì)說(shuō)明

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

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

請(qǐng)思考下面這個(gè)帶有一些文本節(jié)點(diǎn)的 <div>，每個(gè)節(jié)點(diǎn)被兩個(gè)折行元素 (<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() 方法來(lái)把文本塊轉(zhuǎn)換為形式良好的段落：

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

親自試一試

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