jQuery: children

This entry is part 25 of 33 in the series jQuery Tutorial

We have looked at .parent and now we look at .children in the following code.

<!doctype html>
    <title>children demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
        body {
            font-size: 16px;
            font-weight: bolder;

        span {
            color: blue;

        p {
            margin: 5px 0;

<p>Hello (this is a paragraph)</p>

<div><span>Hello Again (this span is a child of the a div)</span></div>
<p>And <span>Again</span> (in another paragraph)</p>

<div>And One Last <span>Time</span> (most text directly in a div)</div>

    $('div').children().css('border-bottom', '3px double red');

Try The Code

The line

$('div').children().css('border-bottom', '3px double red');

will look for the children of <div> and put 2 borderlines on them.  As there is no selector in .children(), any children of <div> will be selected.

Series Navigation<< jQuery: Traversing
jQuery: find >>

Leave a comment

Leave a Reply