.children()

In this chapter you will learn:

Syntax and Description for .children() method
How to get the child of div element
How to count child elements
How to get all LI elements for a UL element
How to insert span element one after another

Syntax and Description

.children([selector])

selector (optional) is a string containing a selector expression to match elements against.

Return value is the new jQuery object.

.children([selector]) gets the children of each element in the set of matched elements, optionally filtered by a selector.

Get the child of a div element

The following code gets the children from DIV element. And then applies border to it.

<html><!--   j a  v a  2s .  c o  m-->
  <head>
    <script src="http://java2s.com/style/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 child count

The following code shows the count of target children.

<html><!-- java 2  s . c o m-->
  <head>
    <script src="http://java2s.com/style/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, java 2s.com</p>
        </div>
    </div>

  </body>
</html>

Click to view the demo

All children of a list element

The following code gets all LI elements from a UL element with child method and adds class to all of them.

<html><!--from j  a  va  2s .c  om-->
  <head>
    <script src="http://java2s.com/style/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'>

        li.tmpChild {
            background: #cf0c35;
            color: white;
        }
    </style>
  </head>
  <body>
    <ul>
       <li>java 2s.com</li>
       <li>B</li>
       <li>C</li>
       <li>D</li>
       <li>E</li>
       <li>F</li>
    </ul>
  </body>
</html>

Click to view the demo

Insert span one after another

The following code appends SPAN one after another.

<html><!--from ja v  a2 s .  c o m-->
<head>
<script src="http://java2s.com/style/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

Next chapter...

What you will learn in the next chapter: