.contents()
.contents() 返回: jQuery
描述: 獲得每個(gè)匹配元素集合元素的子元素,包括文字和注釋節(jié)點(diǎn)。
version added: 1.2.contents()
鑒于一個(gè)jQuery對(duì)象,表示一個(gè)DOM元素的集合,.contents()方法允許我們能夠通過(guò)搜索這些元素和DOM樹,并在他們的祖先從匹配的元素構(gòu)造一個(gè)新的jQuery對(duì)象。.contents()和.children()方法類似,只不過(guò)前者包括文本節(jié)點(diǎn)以及jQuery對(duì)象中產(chǎn)生的HTML元素。
如果IFRAME是在與主頁(yè)同域,.contents()方法也可用于獲取iframe中的文件內(nèi)容。
考慮一個(gè)簡(jiǎn)單<div>中一些文本節(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()方法幫助轉(zhuǎn)化為三合式團(tuán)塊為段文字:
$('.container').contents().filter(function() {
return this.nodeType == 3;
})
.wrap('<p></p>')
.end()
.filter('br')
.remove();
此代碼首先檢索內(nèi)容的<div class="container">,然后過(guò)濾它的文本節(jié)點(diǎn),它被包裹在段落標(biāo)記。這是通過(guò)測(cè)試元素的.nodeType屬性。這個(gè)DOM屬性保存一個(gè)數(shù)字代碼,以顯示節(jié)點(diǎn)的類型;文本節(jié)點(diǎn)使用代碼3。再次過(guò)濾的內(nèi)容是,這個(gè)時(shí)間<br />元素,這些元素都將被刪除。
Examples:
Example: Find all the text nodes inside a paragraph and wrap them with a bold tag.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Hello <a >John</a>, how are you doing?</p>
<script>$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");</script>
</body>
</html>
Demo:
Example: Change the background colour of links inside of an iframe.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe>
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>
</body>
</html>