10 funciones de desplazamiento realmente útiles en jQuery

Con jQuery, seleccionar elementos HTML es ridículamente fácil. Pero a veces, es posible que deseemos 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 formas en las que podemos refinar y extender un conjunto de elementos envueltos sobre los que deseamos operar.

El HTML

En primer lugar, echemos un vistazo a la sencilla página web que se muestra en la siguiente figura. Seleccionaremos elementos en él a lo largo de este tutorial.

1. div.container es el elemento de envoltura.
2. div.photo, div.title y div.rating son elementos secundarios inmediatos de div.container.
3. Cada div.star es un hijo de la div.rating.
4. Cuando una div.star tiene la clase 'on', es una estrella completa.

¿Por qué atravesar?

Pero, ¿por qué necesitamos refinar aún 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 deseemos agregar la clase 'on' a esta misma estrella y a cada una de las estrellas a su izquierda.  Y es posible que queramos cambiar el color de fondo del div padre de las estrellas. Entonces tenemos el siguiente código.

1

$('.star').click(function(){

2

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

3

//	How to select the parent div of 'this'?

4

//	How to select stars to the left side of 'this'?

5

});

En la Línea 2, seleccionamos la estrella en la que se hace clic con 'esto'. Pero, ¿cómo seleccionamos el div padre de las estrellas? Sí, es una clasificación divina.  Pero puede haber una docena de clasificaciones más en una página, ¿verdad? Entonces, ¿cuál es el que queremos? ¿Y cómo seleccionamos todas las estrellas a la izquierda de 'esto'?

Afortunadamente, jQuery nos permite obtener nuevos conjuntos empaquetados a partir de un conjunto existente, en función de las relaciones jerárquicas. Y esto es en parte lo que hacen las funciones de desplazamiento.

1. niños

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

Esto puede resultar muy útil en diversas situaciones. Mira la figura a continuación:

• El contenedor de las estrellas se selecciona inicialmente.
• Se pasa una expresión de selector a children () para limitar el resultado a solo las estrellas completas.
• Si niños() no recibe parámetros, se devolverán todos los hijos inmediatos.
• No se devolverán nietos. Lo siento.

2. filter

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 se eliminará 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.

3. no

Todo lo contrario de filter (), not () elimina los elementos coincidentes del conjunto envuelto.

Ve el ejemplo a continuación. Las estrellas pares se eliminan de la selección, dejando solo las impares.

¡Darte cuenta! Los selectores "pares" e "impares" tienen un índice cero. Cuentan el índice desde 0, NO 1.

4. agregar

¿Qué pasa si queremos agregar algunos elementos al conjunto envuelto? La función agregar() hace esto.

De nuevo, muy sencillo. El cuadro de fotos se agrega a la selección.

5. rebanar

A veces, es posible que deseemos obtener un subconjunto del conjunto envuelto, en función de la posición de los elementos dentro del conjunto. Y rebanar() es el camino a seguir.

• El primer parámetro es la posición de base cero del primer elemento que se incluirá en el segmento devuelto.
• El segundo parámetro es el índice de base cero del primer elemento que NO se incluirá en el segmento devuelto. Si se omite, el corte se extiende hasta el final del conjunto.
• Entonces, rebanar(0, 2) selecciona las dos primeras estrellas.

6. padre

La función padre() selecciona el padre directo de un conjunto de elementos.

Como se muestra en la figura siguiente, se selecciona el padre directo de la primera estrella. Muy útil, ¿eh? Cabe señalar que solo se devolverá el padre directo, por lo que es singular. No se seleccionarán abuelos ni antepasados.

7. padres

¡Este es plural! La función padres() selecciona todos los ancestros de un conjunto de elementos. Me refiero a TODOS los antepasados, desde el padre directo hasta 'body' y 'html'. Por lo tanto, es mejor pasar una expresión de selector para reducir el resultado.

Al pasar '.container' a los padres (), se selecciona div.container, que en realidad es el abuelo de la primera estrella.

8. hermanos

Esta función selecciona todos los hermanos (hermanos y hermanas) de un conjunto de elementos. Se puede pasar una expresión para filtrar el resultado.

Mira el ejemplo:

• ¿Quiénes son los hermanos de la primera estrella? Las otras cuatro estrellas, ¿verdad?
• Los hermanos 'impares' se seleccionan como se muestra. Nuevamente, el índice se basa en cero. Mira los números rojos debajo de las estrellas.

9. prev y prevAll

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 por estrellas. Se seleccionan los hermanos anteriores de la tercera estrella.

10. siguiente y siguienteTodo

Estas funciones funcionan de la misma manera que prev y prevAll, excepto que seleccionan los hermanos SIGUIENTES.

Conclusión

Por fin, veamos cómo estas funciones nos resuelven un dolor de cabeza del mundo real.

1

$('.star').click(function(){

2

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

3

4

//	How to select the parent div of 'this'?

5

	$(this).parent().addClass('rated');

6

7

//	How to select stars to the left side of 'this'?

8

	$(this).prevAll().addClass('on');

9

	$(this).nextAll().removeClass('on');

10

});

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.

• En la línea 5, observe el uso de parent (). Fácil, ¿eh?
• En las líneas 8 y 9, prevAll () y nextAll () seleccionan las futuras estrellas llenas y vacías.

Ahora, tenemos una idea de lo útiles que pueden ser las funciones de desplazamiento. Pueden ser aún más poderosos cuando se usan juntos. La salida de una función puede ser la entrada de otra, es decir, son encadenables.

¡Gracias por leer! Con suerte, este tutorial te facilitará un poco la vida al seleccionar elementos HTML con jQuery. ¿Alguna idea? ¿Qué funciones de desplazamiento nos perdimos?

• Síguenos en Twitter o suscríbate a la fuente RSS de Nettuts+ para obtener más información y artículos sobre desarrollo web diarios.