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