Dizque



Cajón de sastre, Desarrollo web, JavaScript, jQuery

Iteración en jQuery

Saltar a Anotaciones relacionadas

Si todavía no conoces jQuery, quizá te interese empezar por echar un vistazo a la introducción de hace unos días para saber de qué va la cosa.

Por el momento, recordemos que la función $ nos sirve para obtener «colecciones» de nodos usando expresiones CSS o Xpath.

En realidad lo que obtenemos al usar $('#frmChungo input[@type=checkbox]') no es un array, no es una NodeList, no es un pájaro, no es un avión. Es un objeto con algunos métodos más que interesantes. Hablemos de get y each.

get() y get(N)

Si no le pasamos argumento alguno get() devuelve un array que contiene los elementos de la colección. Vaya, un array de nodos.

var ps = $('p').get();
// [HTMLParagraphElement, HTMLParagraphElement, ...]

Pasando un numero N como argumento, devuelve el Node (un auténtico nodo del DOM) que ocupa la posición N dentro de la colección.

var p = $('p').get(0);
// equivalente a 
// document.getElementsByTagName('p')[0]
// ni más, ni menos

Actualización: Desde que la versión 1.0 de jQuery salió a la luz, podemos utilizar la notación de arrays para acceder a los elementos de la colección:

var p = $("p.continue")[4];
// el quinto párrafo con clase "continue"

each(F)

El temible iterador: recibe como parámetro una función F que ejecutará para cada elemento de la colección. En cada llamada, la función recibe como argumento el índice del elemento con el que tratamos.

$('h2').each(function(index){
    alert(index);
});

El nodo mismo es accesible utilizando this (técnicamente, la función se ejecuta en el ámbito –scope– del elemento).

$('p').each(function(index) {
    this.innerHTML = 'Este es el párrafo número' + index;
});

Un ejemplo de la vida real:

function jqSwitchStyle(t) {
    var ss = $("link[@rel$=stylesheet]");
    ss.each(function(i) {
        this.disabled = true;
        if (this.title && this.title == t) {
            this.disabled = false;
        } 
    });
}

Actualización: Podemos utilizar el método estático $.each(objeto, función) para iterar sobre cualquier objeto o array.

Por último, size, no muy interesante, pero vaya, necesaria.

size()

Devuelve el número de elementos en la colección.

$('p').size();
// número de párrafos en el documento

Actualización: Desde la versión 1.0, podemos consultar el número de elementos seleccionados a través de la propiedad length del objeto de retorno:

$('p').length;
// número de párrafos en el documento



Di la tuya

Puedes usar markdown y estas etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> . Por favor, evita el abuso de las mayúsculas y cuida la ortografía.