forked from jquery/api.jquery.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontents.xml
63 lines (63 loc) · 3.09 KB
/
contents.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?xml version="1.0"?>
<entry type="method" name="contents" return="jQuery">
<title>.contents()</title>
<signature>
<added>1.2</added>
</signature>
<desc>Get the children of each element in the set of matched elements, including text and comment nodes.</desc>
<longdesc>
<p>Given a jQuery object that represents a set of DOM elements, the <code>.contents()</code> method allows us to search throughthe immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The <code>.contents()</code> and <code>.children()</code> methods are similar, except that the former includes text nodes as well as HTML elements in the resulting jQuery object.</p>
<p>The <code>.contents()</code> method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.</p>
<p>Consider a simple <code><div></code> with a number of text nodes, each of which is separated by two line break elements (<code><br></code>):</p>
<pre><code>
<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>
</code></pre>
<p>We can employ the <code>.contents()</code> method to help convert this blob of text into three well-formed paragraphs:</p>
<pre><code>
$( ".container" )
.contents()
.filter(function() {
return this.nodeType === 3;
})
.wrap( "<p></p>" )
.end()
.filter( "br" )
.remove();
</code></pre>
<p>This code first retrieves the contents of <code><div class="container"></code> and then filters it for text nodes, which are wrapped in paragraph tags. This is accomplished by testing the <a href="https://developer.mozilla.org/en/nodeType"><code>.nodeType</code> property</a> of the element. This DOM property holds a numeric code indicating the node's type; text nodes use the code 3. The contents are again filtered, this time for <code><br /></code> elements, and these elements are removed.</p>
</longdesc>
<example>
<desc>Find all the text nodes inside a paragraph and wrap them with a bold tag.</desc>
<code><![CDATA[
$( "p" )
.contents()
.filter(function(){
return this.nodeType !== 1;
})
.wrap( "<b></b>" );
]]></code>
<html><![CDATA[
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
]]></html>
</example>
<example>
<desc>Change the background colour of links inside of an iframe.</desc>
<code><![CDATA[
$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
]]></code>
<html><![CDATA[
<iframe src="//api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>
]]></html>
</example>
<category slug="traversing/miscellaneous-traversal"/>
<category slug="version/1.2"/>
</entry>