English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Breve explicación de la diferencia entre next y siblings en jQuery

siblings([expr]):

Resumen  

Obtener un conjunto de elementos que contienen todos los hermanos únicos de cada elemento que coincide con la selección.

[expr] :Se puede realizar una filtración con una expresión opcional. Se utiliza para filtrar elementos hermanos. La expresión para filtrar

Ejemplo

Encontrar todos los hermanos de cada div.

Código de HTML:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

Código de jQuery:

$("div").siblings()

Resultados:

[ <p>Hello</p>, <p>And Again</p> ]

Encontrar el elemento hermano con la clase 'selected' entre todos los hermanos de cada div.

Código de HTML:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

Código de jQuery:

$("div").siblings(".selected")

Resultados:

[ <p class="selected">Hello Again</p> ] next([expr]) : 

 Obtener un conjunto de elementos que contienen el siguiente hermano inmediato de cada elemento que coincide con la selección.

Esta función devuelve solo el siguiente hermano inmediato, no todos los hermanos posteriores (se puede usar nextAll). Se puede realizar una filtración con una expresión opcional.

Ejemplo

Descripción:

Encontrar el elemento hermano siguiente inmediatamente después de cada párrafo.

Código de HTML:

 

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

 Código de jQuery:

$("p").next()

Resultados:

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

Descripción:

Encontrar el elemento hermano siguiente con la clase 'selected' inmediatamente después de cada párrafo.

Código de HTML:

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

Código de jQuery:

$("p").next(".selected")

Resultados:

[ <p class="selected">Hello Again</p> ] 

nextAll([expr]):Buscar todos los elementos hermanos posteriores al elemento actual.

Ejemplo:

Descripción:

Añade una clase a todos los elementos después del primer div

Código de HTML:

<div></div><div></div><div></div><div></div>

Código de jQuery:

$("div:first").nextAll().addClass("after");

Resultados:

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ] 

Casos de aplicación reales

Elimina todos los tr después del primer tr y luego crea estos tr de nuevo:

$(".rili_tab01 tr:first()).next().remove();
var retRow = "<tr><td>"+ret["eventTime"]+"</td><td >"+ret["eventCountry"]+"</td><td>"+ret["eventContent"]+"</td></tr>";
$(".rili_tab01 tr:last()).after(retRow);

Este es el que puede mostrarse correctamente después de intentar, a continuación, con otro método solo se puede completar el primer paso
$(".rili_tab01 tr:first()).siblings.remove();

La creación de nuevo del elemento tr no se ejecutará correctamente

También se puede cambiar a siblings()$(".rili_tab01 tr:first()).siblings().remove();

Descubrí el problema, usé mal el método siblings, el correcto es con paréntesis,

$(".rili_tab01 tr:first()).siblings().remove();
var retRow = "<tr><td>"+ret["eventTime"]+"</td><td >"+ret["eventCountry"]+"</td><td>"+ret["eventContent"]+"</td></tr>";
 $(".rili_tab01 tr:last()).after(retRow);

Aquí termina la breve explicación sobre la diferencia entre next y siblings en jQuery que les presento, espero que todos nos apoyen y sigan gritando tutorial ~

Te gustará