Share
Con jQuery, seleccionar elementos HTML es ridículamente fácil. Pero a veces, podemos desear refinar aún más la selección, lo que puede ser una molestia cuando la estructura HTML es complicada. En este tutorial, exploraremos diez maneras en que podemos refinar y extender un conjunto de elementos envueltos que deseamos operar.
En primer lugar, echemos un vistazo a la página web simple que se muestra en la siguiente figura. Estaremos seleccionando elementos en él a lo largo de este tutorial..
Pero, ¿por qué necesitamos refinar más un conjunto de elementos? ¿No es la sintaxis de selección de jQuery lo suficientemente poderosa??
Bueno, veamos un ejemplo. En la página web mencionada anteriormente, cuando se hace clic en una estrella, es posible que deseamos agregar la clase 'on' a esta estrella y todas las estrellas a la izquierda. Y podemos querer cambiar el color de fondo del div padre de las estrellas. Así que tenemos el siguiente código.
Accentsconagua
$ ('. star'). click (function () $ (this) .addClass ('on'); // ¿Cómo seleccionar el div principal de 'this'? // Cómo seleccionar las estrellas al lado izquierdo de 'esta'? ); En la Línea 2, seleccionamos la estrella que se hace clic con 'esta'. Pero, ¿cómo seleccionamos el div padre de las estrellas? Sí, es div.rating. Pero puede haber una docena más div.ratings en una página, ¿verdad? Entonces, ¿cuál es el que queremos? ¿Y cómo seleccionamos todas las estrellas a la izquierda de 'esta'?
Afortunadamente, jQuery nos permite obtener nuevos conjuntos envueltos de un conjunto existente, en función de las relaciones jerárquicas. Y esto es en parte lo que hacen las funciones de desplazamiento..
Esta función consigue los hijos inmediatos de un conjunto de elementos..
Esto puede ser muy útil en una variedad de situaciones. Mira la figura de abajo:
Esta función filtra los elementos del conjunto envuelto utilizando una expresión de selector pasada. Cualquier elemento que no coincida con la expresión será eliminado de la selección.
El siguiente ejemplo debería ser bastante sencillo. Las estrellas completas se filtran de una colección de las cinco estrellas.
Todo lo contrario de filter (), not () elimina los elementos coincidentes del conjunto envuelto.
Vea el ejemplo a continuación. Incluso las estrellas se eliminan de la selección, dejando solo las impares..
¡Darse cuenta! Los selectores "par" e "impar" tienen indexación cero. Cuentan índice desde 0, NO 1.
¿Qué pasa si queremos agregar algunos elementos al conjunto envuelto? La función add () hace esto.
De nuevo, muy sencillo. La casilla de fotos se añade a la selección..
A veces es posible que deseamos obtener un subconjunto del conjunto envuelto, según la posición de los elementos dentro del conjunto. Y slice () es el camino a seguir..
La función padre () selecciona el padre directo de un conjunto de elementos.
Como se muestra en la siguiente figura, se selecciona el padre directo de la primera estrella. Muy práctico, ¿eh? Cabe señalar que solo se devolverá el padre directo, por lo que es singular. No se seleccionarán abuelos ni antepasados..
¡Este es plural! La función parents () selecciona todos los ancestros de un conjunto de elementos. Me refiero a TODOS los ancestros del padre directo hasta 'cuerpo'y'html'. Así que es mejor pasar una expresión de selección para reducir el resultado.
Al pasar.envasea los padres (), div.container, Que en realidad es el abuelo de la primera estrella, es seleccionado..
Esta función selecciona a todos los hermanos (hermanos y hermanas) de un conjunto de elementos. Se puede pasar una expresión para filtrar el resultado..
Mira el ejemplo:
La función prev () selecciona el hermano anterior (uno), y prevAll () selecciona todos los hermanos anteriores de un conjunto de elementos.
Esto es muy útil si estás creando un widget de calificación de estrellas. Los hermanos anteriores de la tercera estrella son seleccionados..
Estas funciones funcionan de la misma manera que prev y prevAll, excepto que seleccionan los hermanos NEXT.
Por fin, veamos cómo estas funciones nos resuelven un dolor de cabeza real..
$ ('. star'). click (function () $ (this) .addClass ('on'); // ¿Cómo seleccionar el div padre de 'this'? $ (this) .parent (). addClass ( 'rated'); // Cómo seleccionar estrellas en el lado izquierdo de 'this'? $ (this) .prevAll (). addClass ('on'); $ (this) .nextAll (). removeClass ('on' );); Este es el problema que mencionamos al principio de este tutorial, ¿verdad? En estas líneas de código se utilizan varias funciones de desplazamiento..
Ahora, tenemos una idea de lo útiles que pueden ser las funciones de desplazamiento. Pueden ser incluso más poderosos cuando se usan juntos. La salida de una función puede ser la entrada de otra, es decir, son imposibles de manejar..
¡Gracias por leer! Esperemos que este tutorial haga su vida un poco más fácil al seleccionar elementos HTML con jQuery. ¿Alguna idea? ¿Qué funciones de desplazamiento nos perdimos??
