The next tutorial in our jQuery Tips and Tricks school is about accessing children elements of a DOM node.

Example of a part of HTML page:

<div id="parent">
    <div>Child One</div>
    <div>Child Two</div>
    <div>Child Three</div>
    <div>Child Four</div>
</div>

The next jQuery code will pass though all children of div named 'parent', display total number and value of each of them.

$(document).ready(function() {
    // Get all children nodes
    var $childrenNodes = $('#parent').children();
    
    // Display message with number of total children nodes for parent div
    alert('Total children nodes: '+$childrenNodes.length);
    
    // Pass though all children nodes and display their values
    $('#parent').children().each( function() {
        alert($(this).text())
    });
});