## .children( [selector ] )Returns: jQuery

Description: Get the children of each element in the set of matched elements, optionally filtered by a selector.

- #### version added: 1.0.children( [selector ] )

  - selector
    Type: Selector
    A string containing a selector expression to match elements against.

Given a jQuery object that represents a set of DOM elements, the `.children()` method allows us to search through the children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The `.children()` method differs from `.find()` in that `.children()` only travels a single level down the DOM tree while `.find()` can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well. Note also that like most jQuery methods, `.children()` does not return text nodes; to get all children including text and comment nodes, use `.contents()`.

The `.children()` method optionally accepts a selector expression of the same type that we can pass to the `$()` function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Consider a page with a basic nested list on it:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
    <ul class="level-1">  <li class="item-i">I</li>  <li class="item-ii">II    <ul class="level-2">      <li class="item-a">A</li>      <li class="item-b">B        <ul class="level-3">          <li class="item-1">1</li>          <li class="item-2">2</li>          <li class="item-3">3</li>        </ul>      </li>      <li class="item-c">C</li>    </ul>  </li>  <li class="item-iii">III</li></ul>

If we begin at the level-2 list, we can find its children:

1 |
    $( "ul.level-2" ).children().css( "background-color", "red" );

The result of this call is a red background behind items A, B, and C. Since we do not supply a selector expression, all of the children are part of the returned jQuery object. If we had supplied one, only the matching items among these three would be included.

## Examples:

Find all children of the clicked element.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>children demo</title>  <style>  body {    font-size: 16px;    font-weight: bolder;  }  div {    width: 130px;    height: 82px;    margin: 10px;    float: left;    border: 1px solid blue;    padding: 4px;  }  #container {    width: auto;    height: 105px;    margin: 0;    float: none;    border: none;  }  .hilite {    border-color: red;  }  #results {    display: block;    color: red;  }  p, span, em, a, b, button {    border: 1px solid transparent;  }  p {    margin: 10px;  }  span {    color: blue;  }  input {    width: 100px;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <div id="container">  <div>    <p>This <span>is the <em>way</em> we</span>      write <em>the</em> demo,</p>  </div>   <div>    <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write    the</button> demo,  </div>   <div>    This <span>the way we <em>write</em> the <em>demo</em> so</span>    <input type="text" value="early"> in  </div>   <p>    <span>t</span>he <span>m</span>orning.    <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>  </p></div> <script>$( "#container" ).click(function ( event ) {  $( "*" ).removeClass( "hilite" );  var kids = $( event.target ).children();  var len = kids.addClass( "hilite" ).length;   $( "#results span:first" ).text( len );  $( "#results span:last" ).text( event.target.tagName );   event.preventDefault();});</script> </body></html>

#### Demo:

Find all children of each div.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>children demo</title>  <style>  body {    font-size: 16px;    font-weight: bolder;  }  span {    color: blue;  }  p {    margin: 5px 0;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <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> <script>$( "div" ).children().css( "border-bottom", "3px double red" );</script> </body></html>

#### Demo:

Find all children with a class "selected" of each div.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>children demo</title>  <style>  body {    font-size: 16px;    font-weight: bolder;  }  p {    margin: 5px 0;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <div>  <span>Hello</span>  <p class="selected">Hello Again</p>  <div class="selected">And Again</div>  <p>And One Last Time</p></div> <script>$( "div" ).children( ".selected" ).css( "color", "blue" );</script> </body></html>

#### Demo: