.children()

Syntax

.children([selector])

Parameters

selector (optional): A string containing a selector expression to match elements against

Return value

The new jQuery object.

Description

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

Examples

Append SPAN one after another

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("input").keypress(function (e) {
                var c = String.fromCharCode(e.which);
                $("p").append($("<span/>")).children(":last").append(document.createTextNode(c));
                $("div").text(e.which);
            });
        });
    </script>
  </head>
  <body>
    <body>
     <input type="text" />
      <p>Add text - </p>
      <div></div>

    </body>
</html>

Click to view the demo

Children from DIV

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div").children().css("border", "3px double red");
        });
    </script>
  </head>
  <body>
    <body>
         <div><span>span</span>div</div>
  </body>
</html>

Click to view the demo

Get target children length

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("#container").click(function (e) {
              var $ch = $(e.target).children();
              alert($ch.length);
              e.preventDefault();
              return false;
            });
        });
    </script>
  </head>
  <body>
    <body>
    <div id="container">
        <div>
          <p>This <span>is the <em>way</em> we</span>
          write <em>the</em> demo,</p>
        </div>
    </div>

  </body>
</html>

Click to view the demo

filter with an optional expression

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("#container").click(function (e) {
                  var $kids = $(e.target).children();
                  alert($kids.length);
                  e.preventDefault();
                  return false;
                });
        });
    </script>
  </head>
  <body>
    <body>
        <div id="container">
        <div>
          asdf
        </div>
        </div>

    </body>
</html>

Click to view the demo

Attaches a change event to the select that gets the text for each selected option

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("select").change(function () {
                  var str = "";
                  $("select option:selected").each(function () {
                        str += $(this).text() + " ";
                      });
                  $("div").text(str);
                })
                .change();
        });
    </script>
  </head>
  <body>
    <body>
        <select name="sweets" multiple="multiple">
            <option>A</option>
            <option selected="selected">B</option>
            <option>C</option>
            <option selected="selected">D</option>
            <option>E</option>
            <option>F</option>
          </select>
          <div></div>
    </body>
</html>

Click to view the demo

Add class to all children from UL

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type='text/javascript'>
var tmpExample = {
  ready : function() {
    $('ul').children().addClass('tmpChild');
  }
};

$(document).ready(tmpExample.ready);
    </script>
    <style type='text/css'>
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li {
    margin: 1px;
    padding: 3px;
}
li.tmpChild {
    background: #cf0c35;
    color: white;
}
    </style>
  </head>
  <body>
    <ul>
       <li>A</li>
       <li>B</li>
       <li>C</li>
       <li>D</li>
       <li>E</li>
       <li>F</li>
    </ul>
  </body>
</html>

Click to view the demo