jQuery desde Cero: Recorriendo el Documento

Funciones

Para iterar sobre la información obtenida del documento disponemos de las siguientes funciones:

• size(): Retorna el numero de elementos en la lista de resultados. También se puede obtener a través de la propiedad length;
• get(): Retorna una lista de elementos del DOM. Esta función es útil cuando se necesitan hacer operaciones en el DOM en lugar de usar funciones de jQuery.
• get(posición): Retorna un elemento del DOM que esta en la posición especificada.
• find({expresión}): Busca elementos que cumplen con la expresión especificada.
• each(callback(i, element)): Ejecuta una función dentro del contexto de cada elemento seleccionado. Ejecuta un callback recibiendo como parámetro la posición de cada elemento y el propio elemento.

Veamos unos ejemplos usando el documento HTML que utilizamos en el tutorial anterior:

---

Size() y length

Probemos el funcionamiento de size y length imprimiendo por consola cuantos elementos <p> hay en el documento:

<script type="text/javascript"> $("document").ready(function() { console.log('Hay ' + $('p').length + ' elementos <p> en el documento'); console.log('Hay ' + $('p').size() + ' elementos <p> en el documento'); }); </script>

12345678910 <script type="text/javascript">   $("document")ready(function(){   consolelog('Hay '+$('p')length+' elementos <p> en el documento');  consolelog('Hay '+$('p')size()+' elementos <p> en el documento');   }); </script>

Esto debe imprimir en la consola de javascript del browser:

> Hay 4 elementos <p> en el documento

1 >Hay4elementos<p>en el documento

---

get()

Probemos imprimir el resutado de get():

<script type="text/javascript"> $("document").ready(function() { console.log('Lista: \n' + $('li').get()); }); </script>

123456789 <script type="text/javascript">   $("document")ready(function(){   consolelog('Lista: \n'+$('li')get());   }); </script>

Debemos obtener:

> Lista: [object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement]

12 >Lista:[objectHTMLLIElement],[objectHTMLLIElement],[objectHTMLLIElement],[objectHTMLLIElement]

Nótese que obtenemos varios elementos [object HTMLLIElement] esto significa que son objetos DOM; ahora si quisiéramos pudiéramos objetener alguna de sus propiedades:

<script type="text/javascript"> $("document").ready(function() { var liElement = $('li').get(0).innerText; console.log('Texto en <li> posicion cero: ' + liElement); }); </script>

1234567891011 <script type="text/javascript">   $("document")ready(function(){   varliElement=$('li')get(0)innerText;   consolelog('Texto en <li> posicion cero: '+liElement);   }); </script>

Para una mejor lectura del código, coloqué el valor del texto que contiene el elemento en la posición “0″ (cero) de todos los `

del documento en una variable y lo imprimí por consola.
> Texto en <li> posicion cero: item 1

1 >Texto en<li>posicion cero:item1

---

Find()

Usemos ahora find() para encontrar elementos:

<script type="text/javascript"> $("document").ready(function() { $('body').find('p.class1').css('border', '3px solid red'); }); </script>

123456789 <script type="text/javascript">   $("document")ready(function(){   $('body')find('p.class1')css('border','3px solid red');   }); </script>

Podemos ver como el <p> que contiene el texto “Mario” se le pinta el borde de rojo. Con la función “css” le aplicamos una regla de css.

También podemos usar filtros para encontrar elementos:

<script type="text/javascript"> $("document").ready(function() { $('body').find(':contains ("i")').css('border', '3px solid red'); }); </script>

123456789 <script type="text/javascript">   $("document")ready(function(){   $('body')find(':contains ("i")')css('border','3px solid red');   }); </script>

Con esto veremos que todos los elementos que contengan una letra “i” se les pintará el borde de rojo.

---

each()

Vamos a iterar sobre los elementos seleccionados con each() para mostrar alguna de sus propiedades:

<script type="text/javascript"> $("document").ready(function() { $('li').each(function(i, item) { var text = item.innerText; console.log('El texto del elemento ' + i + ' es: ' + text); }); }); </script>

123456789101112131415 <script type="text/javascript">   $("document")ready(function(){   $('li')each(function(i,item){   vartext=iteminnerText;   consolelog('El texto del elemento '+i+' es: '+text);   });   }); </script>

En este caso imprimo el texto interno de cada uno de los elementos seleccionados.

Los parámetros del callback son opcionales, podemos prescindir de cualquiera de los dos o de los dos a la vez. Si no incluyéramos el parámetro “ítem”, pudiéramos usar this, este refiere al elemento que está en el contexto de la función, en este caso el <li> de cada iteración.

<script type="text/javascript"> $("document").ready(function() { $('li').each(function(i) { var text = this.innerText; console.log('El texto del elemento ' + i + ' es: ' + text); }); }); </script>

123456789101112131415 <script type="text/javascript">   $("document")ready(function(){   $('li')each(function(i){   vartext=thisinnerText;   consolelog('El texto del elemento '+i+' es: '+text);   });   }); </script>

De cualquiera de las dos maneras obtenemos el mismo resultado:

> El texto del elemento 0 es: item 1 > El texto del elemento 1 es: item 2 > El texto del elemento 2 es: item 3 > El texto del elemento 3 es: item 4

1234 >El texto del elemento0 es:item1>El texto del elemento1 es:item2>El texto del elemento2 es:item3>El texto del elemento3 es:item4

---

Conclusión

Con estas funciones obtenemos un poder más en nuestra lista de habilidades de jQuery. Y seguimos avanzando. Este ha sido solo un capitulo más de muchos que faltan por venir.

Si te gustó este tutorial no olvides compartirlo en las redes sociales de tu preferencia. Ayuda a expandir el conocimiento, por favor.

Como siempre, cualquier duda que surja, no lo pienses dos veces antes de dejarla en la sección de comentarios de más abajo.

¡Hasta el próximo tutorial!

---