post thumbnail

jQuery desde Cero: Recorriendo el Documento

Publicado Por: Oscar González, El 09/12/2013


Detalles del Curso:

Dificultad: Novato

Duración: 20 min


Más artículos en jQuery desde Cero

Este es el artículo Recorriendo el Documento de la serie jQuery desde Cero - Mostrar todos

  1. Introducción
  2. Selectores y Filtros Básicos
  3. Filtros Avanzados
  4. Recorriendo el Documento
  5. Manipulando Contenido - parte 1
  6. Manipulando Contenido - parte 2
  7. Eventos
  8. Animaciones y Efectos
  9. AJAX

En este capítulo hablaremos de como iterar sobre elementos del 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:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Prueba Filtros avanzados</title>

  <script type="text/javascript" src="javascript/jquery-2.0.3.min.js"></script>

</head>
<body>

  <ul id="list-1">
    <li class="a">Item 1</li>
    <li class="b">Item 2</li>
    <li class="a">Item 3</li>
    <li class="b">Item 4</li>
  </ul>

  <p class="class1">Mario</p>
  <p class="paragraph1">Luigi</p>
  <p class="class2">Toad</p>
  <p class="paragraph2">Bowser</p>

</body>
</html>

Size() y length

Probemos el funcionamiento de size y length imprimiendo por consola cuantos elementos

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>

Esto debe imprimir en la consola de javascript del browser:

> Hay 4 elementos <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>

Debemos obtener:

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

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>

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
    

    Find()

    Usemos ahora find() para encontrar elementos:

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

    Podemos ver como el

    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>
    

    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>
    

    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

  • 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>
    

    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
    

    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!


    ¿Te ha gustado esta publicación?

    Compártela:

    Por Oscar González

    Conoce más sobre este autor aquí


    comments powered by Disqus