.contents() JQ Home  <<  Traversal  <<  .contents()

• <<    .andSelf()
• .each()     >>

All children retrieval.

Description

The .contents() method is used to retrieve the children of each element within the matched set, including text and comment nodes.

We can also use the .contents() method to get the content document of an iframe, if it is on the same domain as the page we are using it in.

As of jQuery 3.2 .contents() returns the contents of template elements as well.

Syntax

Parameters

None.

Return

A jQuery object.

Dom Types and Values

We can test the node type by using the nodeType property of each element. The table below gives the names of each node type and their value.

.contents() ExamplesTraversal  <<  Top

Retrieve the children of each element within the matched set, including text and comment nodes.

In the example below we select all 'a' elements on the page. We then further filter to find non ELEMENT_NODE children. We then get the parent of each element in the matched set and turn the background colour to orange.

$(function(){
  $('#btn14').on('click', function() {
    $('a').contents()
          .filter(function(){ 
            return this.nodeType != 1; // Any node type apart from ELEMENT_NODE 
          })
          .parent()
          .css('backgroundColor', 'orange');
  });
});

Get the content document of an iframe that is on the same domain as the page we are using it in.

In the example below we locate the iframe with an id of 'ourIframe' and change the background colour of the '.content' content to olive.

$(function(){
  $('#btn15').on('click', function() {
    $('#ourIframe').contents()
                   .find('.content')
                   .css('backgroundColor', 'olive');  
  });
});

Related Tutorials

jQuery Basic Tutorials - Lesson 7 - Other Traversal

• <<    .andSelf()
• .each()     >>