ASP.NET: Otras funcionalidades jQuery

Antes de meternos más a fondo en jQuery, es necesario comprender algunas de sus funcionalidades más importantes ya que más pronto o más tarde las vamos a necesitar. Para empezar,  vamos a hablar del método "each".

Método "each"

El método "each" se repite sobre una colección de elementos. Esto nos viene de maravilla si deseamos aplicar un determinado comportamiento a cada uno de los elementos de un conjunto que no se puede establecer con una sola función jQuery. Como argumento al método "each" le pasamos una función que se ejecuta para cada uno de los elementos del conjunto.

Partiendo del mismo código HTML que se mostró en el post "ASP.NET: Filtros básicos jQuery" donde aparecía una tabla con "id=Demotable", el siguiente ejemplo del método "each" muestra mediante un "alert" el contenido de cada celda de la tabla "DemoTable".

$('#DemoTable td').each(function()
{
    alert(this.innerHTML);
});

Otros dos métodos jQuery importantes son "parent" y "prev". Estos métodos se utilizan en el recorrido del DOM (Document Object Model), donde se puede recorrer de arriba a abajo la estructura del documento para encontrar elementos que están por debajo o por encima de un elemento, o en el mismo nivel.

Método "prev"

El método "prev" selecciona el hermano directo anterior de un elemento. Para ver cómo funciona esto, veamos el siguiente ejemplo:

alert($('#DemoTable td:contains("Row 1 Cell 2") ').prev()[0].innerHTML);

Que creéis que sacará el mensaje de alerta? Si habéis contestado "Row 1 Cell 1" estáis en lo cierto. El selector "$" primero selecciona la celda de la tabla que se encuentra en la segunda columna de la primera fila por el texto que contiene. A continuación el método "prev" devuelve a su primer hermano: la celda que se encuentra a la izquierda de la celda actual. Debido a que un conjunto de elementos es una colección incluso si contiene un único elemento, tenemos que indicar el índice (con [0]) para referirnos al primero elemento. Ahora que ya estamos apuntando a la celda que nos interesa, obtenemos el contenido de la misma utilizando la propiedad "innerHTML".

Por último, veamos el método "parent".

Método "parent"

alert($('#DemoTable td:contains("Row 1 Cell 2") ').parent()[0].innerHTML);

El selector es el mismo que en el ejemplo anterior. Sin embargo, la función "parent" ahora señala a la línea enter "<tr>". Por ese motivo, al mostrar en el "alert" la propiedad "innerHTML" devuelve el HTML de las dos celdas que contiene la fila.