jQuery | Selector padre > hijo

Es un jQuery Selector que se usa para seleccionar todos los elementos que son hijos directos de su elemento principal.

Sintaxis:

("parent > child")

Valores paramétricos:

  • parent: Al usar esto, se seleccionará el elemento principal.
  • child: al usar esto, se seleccionará el elemento secundario directo del elemento principal especificado.

Valor de retorno: selecciona y devuelve todos los elementos secundarios directos del elemento principal especificado.

Ejemplo 1:

<!DOCTYPE html>
<html>
<h1><center>Geeks </center></h1>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
     
  <script>
        $(document).ready(function() {
            $("div > span").css(
              "background-color", "green");
        });
    </script>
</head>
  
<body>
    <h3>All span elements that are 
      a direct child of <div>
      element are selected.</h3>
  
    <div style="border:1px solid black;">
        <p>Geeks for Geeks
            <br>
          <span>
            jQuery parent > child Selector
          </span></p>
    </div>
    <br>
  
    <div style="border:1px solid black;">
        <p>Geeks for Geeks</p>
        <span>
          jQuery parent > child Selector
      </span>
    </div>
  
</body>
  
</html>

Producción:

Ejemplo-2:

<!DOCTYPE html>
  
<html>
<h1><center>Geeks </center></h1>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
    <script>
        $(document).ready(function() {
            $("div").css(
              "background-color", "green");
        });
    </script>
</head>
  
<body>
    <h3>All div elements 
      are selected.</h3>
  
    <div style="border:1px solid black;">
        <p>Geeks for Geeks</p>
        <p>jQuery parent > child Selector
      </p>
    </div>
  
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *