jQuery - método children ([selector])

Descripción

los children( [selector] ) El método obtiene un conjunto de elementos que contienen todos los elementos secundarios inmediatos únicos de cada uno de los conjuntos de elementos coincidentes.

Sintaxis

Aquí está la sintaxis simple para usar este método:

selector.children( [selector] )

Parámetros

Aquí está la descripción de todos los parámetros utilizados por este método:

selector- Este es un argumento opcional para filtrar a todos los niños. Si no se proporciona, se seleccionan todos los niños.

Ejemplo

A continuación se muestra un ejemplo simple que muestra el uso de este método:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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>

Esto aplicaría el color azul a todos los niños con una clase "seleccionada" de cada div, como se muestra a continuación:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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>

Esto producirá el siguiente resultado:

jquery-traversing.htm

↰ Previous page