control-freak-ide/Control-Freak-Documentation/jQuery/docs/entries/contents.json

{"name":"contents","type":"method","title":".contents()","deprecated":null,"removed":null,"desc":"Get the children of each element in the set of matched elements, including text and comment nodes.","categories":["traversing/miscellaneous-traversal","version/1.2"],"entries":[{"return":"jQuery","signatures":{"added":"1.2"},"examples":[{"desc":"Find all the text nodes inside a paragraph and wrap them with a bold tag.","code":"\n$( \"p\" )\n  .contents()\n  .filter(function(){\n    return this.nodeType !== 1;\n  })\n  .wrap( \"<b></b>\" );\n","html":"\n<p>Hello <a href=\"http://ejohn.org/\">John</a>, how are you doing?</p>\n"},{"desc":"Change the background colour of links inside of an iframe.","code":"\n$( \"#frameDemo\" ).contents().find( \"a\" ).css( \"background-color\", \"#BADA55\" );\n","html":"\n<iframe src=\"//api.jquery.com/\" width=\"80%\" height=\"600\" id=\"frameDemo\"></iframe>\n"}],"longdesc":"\n    <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>\n    <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>\n    <p>Consider a simple <code>&lt;div&gt;</code> with a number of text nodes, each of which is separated by two line break elements (<code>&lt;br&gt;</code>):</p>\n    <pre><code>\n&lt;div class=\"container\"&gt;\n  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed\n  do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n  &lt;br&gt;&lt;br&gt;\n  Ut enim ad minim veniam, quis nostrud exercitation ullamco\n  laboris nisi ut aliquip ex ea commodo consequat.\n  &lt;br&gt;&lt;br&gt;\n  Duis aute irure dolor in reprehenderit in voluptate velit\n  esse cillum dolore eu fugiat nulla pariatur.\n&lt;/div&gt;\n    </code></pre>\n    <p>We can employ the <code>.contents()</code> method to help convert this blob of text into three well-formed paragraphs:</p>\n    <pre><code>\n$( \".container\" )\n  .contents()\n    .filter(function() {\n      return this.nodeType === 3;\n    })\n      .wrap( \"&lt;p&gt;&lt;/p&gt;\" )\n      .end()\n    .filter( \"br\" )\n    .remove();\n    </code></pre>\n    <p>This code first retrieves the contents  of <code>&lt;div class=\"container\"&gt;</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>&lt;br /&gt;</code> elements, and these elements are removed.</p>\n  "}]}