jquery, encuentra el siguiente elemento por clase


102

¿Cómo puedo encontrar el siguiente elemento por clase?

Intenté con $(obj).next('.class');pero esto devuelve clases solo en $(obj)padre. Necesito tomar el siguiente elemento en cualquier lugar del código por nombre de clase. Porque mi código se parece a

<table>
<tr><td><div class="class">First</div></td></tr>
<tr><td><div class="class">Second</div></td></tr>
</table>

es posible?

Respuestas:


145

En este caso, debe subir al y <tr> luego usar .next(), así:

$(obj).closest('tr').next().find('.class');

O si puede haber filas intermedias sin el .classinterior, puede usar .nextAll(), así:

$(obj).closest('tr').nextAll(':has(.class):first').find('.class');

Sería más fácil hacer esto: $ (obj) .closest ('tr'). NextAll ('. Class') [0];
StuR

2
@StuR: eso no funcionaría aquí, ya que .nextAll () solo mira los elementos hermanos. Necesita algo que mire a los descendientes para encontrar el siguiente <div> que desea la pregunta.
Nick Craver

1
¿Y si quisiera obtener un atributo de ese HTMLObject devuelto? Como un$(obj).closest('tr').nextAll('.class')[0].attr('data-attribute');
Dennis Braga

Es posible que también deba usar: .parent (). Next ("") si el elemento no tiene hermanos
shasi kanth

@NickCraver Eres increíble
EL ESPÍRITU SANTO

23

Para encontrar el siguiente elemento con la misma clase:

$(".class").eq( $(".class").index( $(element) ) + 1 )

13

No puede usar next () en este escenario, si observa la documentación dice:
Next () Obtiene el hermano inmediatamente siguiente de cada elemento en el conjunto de elementos coincidentes. Si se proporciona un selector, recupera el siguiente hermano que coincide con el selector.

Entonces, si el segundo DIV estaba en el mismo TD, entonces podría codificar:


// Won't work in your case
$(obj).next().filter('.class');

Pero como no lo es, no veo un punto para usar next (). En su lugar, puede codificar:

$(obj).parents('table').find('.class')


6
Pero, ¿cómo encuentra el siguiente elemento? .find devolvería todos los elementos.
Shashwat Kumar
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.