mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-20 07:50:27 +00:00
83 lines
No EOL
4.1 KiB
HTML
83 lines
No EOL
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
|
<div class="ui-page">
|
|
<div class="ui-header">
|
|
<h1>.contents()</h1>
|
|
|
|
</div>
|
|
<div class="ui-content ui-body ui-body-c" id="contents1">
|
|
<h2 class="jq-clearfix roundTop section-title">
|
|
<span class="name">.contents()</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
|
</h2>
|
|
<div class=" entry-details">
|
|
<p class="desc"><strong>Description: </strong>Get the children of each element in the set of matched elements, including text nodes.</p>
|
|
<ul class="signatures"><li class="signature" id="contents"><h4 class="name">
|
|
<span class="versionAdded">version added: <a href="/category/version/1.2/">1.2</a></span>.contents()</h4></li></ul>
|
|
<div class="longdesc">
|
|
<p>Given a jQuery object that represents a set of DOM elements, the <code>.contents()</code> method allows us to search through the 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><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>
|
|
</pre>
|
|
<p>We can employ the <code>.contents()</code> method to help convert this blob of text into three well-formed paragraphs:</p>
|
|
<pre>
|
|
$('.container').contents().filter(function() {
|
|
return this.nodeType == 3;
|
|
})
|
|
.wrap('<p></p>')
|
|
.end()
|
|
.filter('br')
|
|
.remove();
|
|
</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>
|
|
</div>
|
|
<h3>Examples:</h3>
|
|
<div id="entry-examples" class="entry-examples">
|
|
<div id="example-0">
|
|
<h4>Example: <span class="desc">Find all the text nodes inside a paragraph and wrap them with a bold tag.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
</head>
|
|
<body>
|
|
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
|
|
<script>$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
<div id="example-1">
|
|
<h4>Example: <span class="desc">Change the background colour of links inside of an iframe.</span>
|
|
</h4>
|
|
<pre><code class="example demo-code"><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="http://code.jquery.com/jquery-latest.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></code></pre>
|
|
<h4>Demo:</h4>
|
|
<div class="demo code-demo"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body></html> |