.contents()

jQuery

previous page next page

.contents()

Categories: Traversing > Miscellaneous Traversing

.contents() Returns: jQuery

Description: Get the children of each element in the set of matched elements, including text and comment nodes.

  • version added: 1.2.contents()

    • This method does not accept any arguments.

Given a jQuery object that represents a set of DOM elements, the .contents() 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 .contents() and .children() methods are similar, except that the former includes text nodes as well as HTML elements in the resulting jQuery object.

The .contents() 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.

Consider a simple <div> with a number of text nodes, each of which is separated by two line break elements (<br />):

1
2
3
4
5
6
7
8
9
10
 
                                

                                  

                                    
                                      <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>

We can employ the .contents() method to help convert this blob of text into three well-formed paragraphs:

1
2
3
4
5
6
7
 
                                

                                  

                                    $('.container').contents().filter(function() {
                                  

                                

                                

                                  

                                      return this.nodeType == 3;
                                  

                                

                                

                                  

                                    })
                                  

                                

                                

                                  

                                      .wrap('<p></p>')
                                  

                                

                                

                                  

                                    .end()
                                  

                                

                                

                                  

                                    .filter('br')
                                  

                                

                                

                                  

                                      .remove();

This code first retrieves the contents of <div class="container"> and then filters it for text nodes, which are wrapped in paragraph tags. This is accomplished by testing the .nodeType property 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 <br /> elements, and these elements are removed.

Examples:

Example: Find all the text nodes inside a paragraph and wrap them with a bold tag.

1
2
3
4
5
6
7
8
9
10
11
 
                                  

                                    

                                      
                                        <!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>

Example: Change the background colour of links inside of an iframe.

1
2
3
4
5
6
7
8
9
10
11
 
                                  

                                    

                                      
                                        <!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>
 POWERED BYHERONOTE
previous page start next page