jQuery | elemento + siguiente Selector

El selector («elemento + siguiente») selecciona en jQuery utilizado para seleccionar el elemento «siguiente» del «elemento» especificado . Este selector solo funciona cuando el elemento «siguiente» se coloca justo después del elemento especificado. 

Por ejemplo: 

  • Si la instrucción es $(“div + p”) , esto solo seleccionará el primer elemento “p” que está justo al lado de “div” y el otro elemento “p” se ignorará. 
  • Pero si la instrucción es $(“div + p”) y se coloca un “h1” entre los elementos “div” y “p” seleccionados, este selector no funcionará y el elemento “p” no será efectivo.

Sintaxis:  

$("element + next")

Parámetro: aquí, los parámetros son obligatorios y esto especificará cualquier elemento válido.

Valor devuelto: Esto devolverá el elemento seleccionado con el cambio especificado.

Ejemplo-1: Aquí el elemento de párrafo está justo al lado del elemento div.  

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
   
    <script>
        $(document).ready(function() {
         $("div + p").css("background-color",
                          "lightgreen");
        });
    </script>
   
    <style>
        body {
            width: 80%;
            height: 40%;
            padding: 10px;
            border: 2px solid green;
            font-size: 20px;
        }
         
        div {
            border: 1px solid green;
            padding: 10px;
        }
    </style>
</head>
 
<body>
 
    <div>Welcome to GfG.!</div>
     
<p>This is first paragraph element.</p>
 
     
<p>This is second paragraph element.</p>
 
 
</body>
 
</html>

Producción: 

Ejemplo-2: Aquí, el elemento de encabezado está entre el párrafo y el elemento div. Por lo tanto, no se producirá ningún cambio en el elemento «p».  

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
   
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("div + p").css("background-color",
                                 "lightgreen");
            });
 
        });
    </script>
    <style>
        body {
            width: 80%;
            height: 40%;
            padding: 10px;
            border: 2px solid green;
            font-size: 20px;
        }
         
        div {
            border: 1px solid green;
            padding: 10px;
        }
    </style>
</head>
 
<body>
 
    <div>Welcome to GfG.!</div>
    <h1>Heading element ios here.</h1>
     
<p>This is first paragraph element.</p>
 
     
<p>This is second paragraph element.</p>
 
    <button>Submit</button>
 
</body>
 
</html>

Producción: 

Antes de hacer clic: 

Después de hacer clic: 

Publicación traducida automáticamente

Artículo escrito por Sruti Rai 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 *