jQuery | atravesando hermanos

Podemos recorrer los lados del árbol Dom con la ayuda de jQuery y encontrar los hermanos de un elemento .
Los elementos hermanos comparten el mismo padre.

Traversing Sideways: métodos jQuery para atravesar los lados en el árbol dom.

hermanos(): los hermanos() es un método incorporado en jQuery que se utiliza para encontrar todos los elementos hermanos del elemento seleccionado.
Sintaxis:
```
$(selector).siblings(function)
```
next() & nextAll(): next() es una función incorporada en jQuery que se usa para devolver el siguiente hermano del elemento seleccionado.
Sintaxis:
```
$(selector).next()
```
nextUntil(): nextUntil() es un método incorporado en jQuery que se usa para encontrar todos los elementos hermanos entre dos elementos dados.
Sintaxis:
```
$(selector1).nextUntil(selector2)
```
prev() & prevAll(): Prev( ) es una función incorporada en jQuery que se utiliza para devolver el elemento hermano anterior del elemento seleccionado.
Sintaxis:
```
$(selector).prev()
```
prevUntil(): El prevUntil() es un método incorporado en jQuery que se usa para encontrar todos los elementos hermanos anteriores entre dos elementos dados.
Sintaxis:
```
$(selector1).nextUntil(selector2)
```

Ejemplo-1: Uso del “método hermanos()” .

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .block {
            display: block;
            border: 1px solid black;
            padding: 10px;
            color: black;
        }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
  </script>
    <script>
        $(document).ready(function() {
            $("h3").siblings().css({
                "color": "green",
                "border": "3px solid green"
            });
        });
    </script>
</head>
  
<body>
    <div class="block">
        <h2 class="block">Geeks</h2>
        <h3 class="block">for</h3>
        <h4 class="block">Geeks</h4>
    </div>
</body>
  
</html>

Producción:

Ejemplo-2: Uso del “método next()” .

<html>
  
<head>
    <style>
        .next * {
            display: block;
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
    <script>
        $(document).ready(function() {
            $("h3").next().css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    </script>
</head>
  
<body class="next">
    <div>
        This is parent element !
        <p>This is first paragraph
      </p>
        <span>first span box </span>
        <h2>heading 2 !</h2>
        <h3>heading 3 !</h3>
        <p>This is the second paragraph
          and next sibling to h3 !</p>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta