10 funciones transversales muy útiles en jQuery

Usando jQuery , puedes seleccionar fácilmente elementos HTML . Pero a veces, cuando la estructura HTML es más compleja, refinar los elementos que elegimos es algo problemático. En este tutorial, exploraremos diez formas de refinar y ampliar las colecciones con las que trabajaremos.

HTML

Primero, veamos la página simple que se muestra a continuación y, a través de este tutorial, seleccionaremos los elementos.

1. div.container es el elemento envolvente;
2. div.photo , div.title y div.rating son hijos directos de div.container ;
3. Cada div.star es hijo de div.rating ;
4. Cuando la clase de div.satr está "activada" , es una clase completa.
5. .
6. ¿Por qué atravesar?

   " ¿Por qué necesitamos refinar aún más una serie de elementos? ¿Es porque la sintaxis de selección de jQuery no es lo suficientemente potente? "

   Bien, comencemos con un ejemplo. En la página web mencionada anteriormente, cuando se hace clic en una estrella , debemos agregarle la clase "on" y cada estrella a la izquierda . Al mismo tiempo, queremos cambiar el color de fondo de todos los elementos principales estrella , por lo que nuestro código es el siguiente:

   En la segunda línea, obtenemos el objeto actual en el que hicimos clic. ¿Pero cómo conseguir el padre de las estrellas ? Eso es div.rating . Sin embargo, en una página hay muchos div.rating . ¿Cuál queremos? ¿Cómo conseguir todas las estrellas a la izquierda de "esto" ?

   La buena noticia es que jQuery nos permite obtener nuevas colecciones de elementos a partir de colecciones existentes basadas en estas relaciones básicas. Y aquí es donde entran en juego las funciones transversales.

   1. niños

   Esta función obtiene los hijos directos de un conjunto de elementos.

   Esto puede resultar muy conveniente en muchas situaciones, eche un vistazo a la siguiente imagen:

   1. Al principio, se seleccionan todas las estrellas del contenedor ;
   2. Pase una expresión de selección a niños() para limitar los resultados de la selección a la estrella seleccionada ;
   3. Si Children() acepta algún parámetro, se devolverán todos los hijos directos;
   4. Los elementos nietos no se devuelven.
   5. 

   $('.star').hacer clic(función(){

            $(this).addClass('en');

   //        ¿Cómo seleccionar el elemento padre del objeto actual ?

   //        ¿Cómo conseguir todas las estrellas a la izquierda de la estrella actual ?

   });