jQuery - children( [selector]) Method


Advertisements


Description

The children( [selector] ) method gets a set of elements containing all of the unique immediate children of each of the matched set of elements.

Syntax

Here is the simple syntax to use this method −

selector.children( [selector] )

Parameters

Here is the description of all the parameters used by this method −

  • selector − This is an optional argument to filter out all the childers. If not supplied then all the childerns are selected.

Example

Following is a simple example a simple showing the usage of this method −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script>
         $(document).ready(function(){
            $("div").children(".selected").addClass("blue");
         });
      </script>
		
      <style>
         .blue { color:blue; }
      </style>
		
   </head>
	
   <body>
	
      <div>
         <span>Hello</span>
         <p class="selected">Hello Again</p>
         <div class="selected">And Again</div>
         <p class="biggest">And One Last Time</p>
      </div>
		
   </body>
	
</html>

This would apply blue color to all children with a class "selected" of each div, as shown below −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script>
         $(document).ready(function(){
            $("div").children(".selected").addClass("blue");
         });
      </script>
		
      <style>
         .blue { color:blue; }
      </style>
		
   </head>
	
   <body>
	
      <div>
         <span>Hello</span>
         <p class="blue">Hello Again</p>
         <div class="blue">And Again</div>
         <p class="biggest">And One Last Time</p>
      </div>
		
   </body>
</html>

This will produce following result −


jquery-traversing.htm