jQuery 遍歷 - contents() 方法

jQuery 遍歷參考手冊

實例

找到段落中的所有文本節點，并用粗體標簽包裝它們。

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

親自試一試

定義和用法

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

語法

.contents()

詳細說明

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

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

請思考下面這個帶有一些文本節點的 <div>，每個節點被兩個折行元素 (<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() 方法來把文本塊轉換為形式良好的段落：

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

親自試一試

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

jQuery 遍歷參考手冊