JQuery WrappedSet

JQuery se ha convertido estos años en el framework de referencia a la hora de usar Javascript . Aun así en muchas ocasiones cuando utilizamos el framework no tenemos claro cuales son sus conceptos fundamentales y como podemos sacar un mejor partido de ellos .En este articulo vamos a explicar el concepto de wrappedset y como JQuery lo gestiona.

JQuery WrappedSet (concepto)

Para entender lo que es un wrappedset  cuya traducción sería “conjunto envuelto” vamos a utilizarlo en un ejemplo de JQuery. Para ello vamos a partir del siguiente bloque de código html.

<p>primero</p>
<p>segundo</p>
<p>tercero</p>
<p>cuarto</p>

Vamos a utilizar JQuery para cambiar el color de los elementos utilizando un selector que define el primer wrappedset.

$(document).ready(function() {

$("p").css("color","blue");

});

Hemos seleccionado el primer conjunto de nodos  o wrappedset  .

Hecho esto simplemente hemos cambiado los colores de los párrafos para que nos muestre en color azul.

Imaginemos por un momento que nos interesa solo seleccionar los elementos impares . Podríamos utilizar otro selector o podríamos utilizar un filtro . Vamos a optar por lo segundo usar un filtro. El código de JQuery será el siguiente .

$(document).ready(function() {
 $("p").filter(":odd").css("color","blue");
});

La página ahora mostrará el siguiente resultado:

Al aplicar la función de filter hemos construido un nuevo wrappedSet pero mas pequeño que solo incluye los nodos impares.

Pares y Impares

Igual que podemos mostrar de un color los nodos pares podríamos realizar la misma operación con los nodos pares de la siguiente forma.

$(document).ready(function() {

$("p").filter(":odd").css("color","blue");
 $("p").filter(":even").css("color","red");

});

La página se mostrará en dos colores (azul, rojo)

Ahora bien ¿se podría haber hecho de otra forma? . Es evidente que si ya que hemos generado el mismo wrappedset dos veces $(“p”) para luego aplicar un filtro y generar otros dos.

Método end

Si entendemos bien el concepto de wrappedset sería mas útil realizar la primera selección $(“p”) aplicar el filtro de impares filter(“:odd”) y luego volver a la selección inicial $(“p”) para aplicar el filtro de pares. Para poder realizar esta operación usaremos el método end de JQuery que nos permite seleccionar el wrappedset anterior.

Así pues el código correcto podría definirse en una única linea de la siguiente forma.

$(document).ready(function() {

 $("p").filter(":odd").css("color","blue").end().filter(":even").css("color","red");

});

Así podemos ver que entender los conceptos de fundamentales de JQuery es clave para poder construir una solución correcta a nuestros problemas.