pregunta sobre jquery.is(expr)

[Un_Tico]

Hola Amigos,

Estoy trabajando en una rutina en jquery para hacer que mis tablas tengan rollover, click de selección de un row y otras cosillas que deseo implementar para mis aplicaciones, la cuestión es que probando cosas me topé con esto:

Código:

$(document).ready( function() {
	$("table.RowOverMe tbody tr").mouseover( function() {
		$(this).removeClass();
		$(this).addClass("rowover");
	}).mouseout( function() {	
		if($(this).is(":odd")){
			$(this).addClass("row1");
		}else{
			$(this).addClass("row2");
		}
	}).click(function(){
		$(this).removeClass();
		$(this).addClass("rowselected");
	});
	$("table.RowOverMe thead tr").addClass("header");
	$("table.RowOverMe tbody tr:odd").addClass("row1");
	$("table.RowOverMe tbody tr:even").addClass("row2");
});

en:

Código:

if($(this).is(":odd")){
	$(this).addClass("row1");
}else{
	$(this).addClass("row2");
}

esto

Código:

$(this).is(":odd")

siempre devuelve false y no me explico por que, si alguien sabe porque me seria de ayuda, gracias

Saludos...

[venkman]

La verdad es que no sé seguro por qué devuelve false, pero creo que es porque :odd debe usarse para colecciones. No sé, pero es la sensación que tengo.

De todos modos, podrías resolver tu problema así:

Código:

$(document).ready( function() {
	$("table.RowOverMe thead tr").addClass("header");

        // Eventos que afectan a cualquier fila
	$("table.RowOverMe tbody tr").mouseover( function() {
		$(this).removeClass();
		$(this).addClass("rowover");
	}).click(function(){
		$(this).removeClass();
		$(this).addClass("rowselected");
	});
        // Eventos que afectan a las filas impares
	$("table.RowOverMe tbody tr:odd").addClass("row1").mouseout( function() {	
			$(this).addClass("row1");
	});
        // Eventos que afectan a las filas pares
	$("table.RowOverMe tbody tr:even").addClass("row2").mouseout( function() {	
			$(this).addClass("row2");
	});
});

Que es ligeramente más largo de escribir, pero queda ordenado también.

[Un_Tico]

Hola VenkMan, ya habia realizado ese cambio para manejar los eventos de las filas odd y even, el detalle es que queria manejarlos juntos para no tener que hacer duplicar el codigo, buscando y buscando he encontrado un plugin de jquery llamado sortertable , el cual trae un monton de funciones para una tabla, revisando el codigo encontré como el autor Christian Bach hizo el Widget de "zebra" y coinsidentemente es la misma tecnica, ahora lo que voy a hacer es modificar el script para agregar un par de cosillas que me parece que le hacen falta a este magnifico script, pero igual si alguien sabe ¿PORQUE DEVUELVE FALSE? me gustaria saberlo....

Gracias por contestar VenkMan....

Saludos...

[venkman]

Pues mira, me he puesto a mirar el código de jQuery y he encontrado dos cosas. Una no tiene relación pero es que el estilo .rowselected no se conserva con tu código.
Prueba a hacer click en una fila y se marca como .rowselected. Bien. Pero si vuelves a pasar el ratón por encima, se quita el .rowselected. No sé si es esto lo que quieres realmente, pero a mi me resulta extraño (ver nota más abajo).

Lo otro que he visto es que si quieres ver una cosa curiosa, prueba este código:

Código:

$(document).ready( function() {
	$("table.RowOverMe tbody tr").mouseover( function() {
		$(this).removeClass();
		$(this).addClass("rowover");
	}).mouseout( function() {	
        $(this).removeClass();
		if($(this).is(":even")){
			$(this).addClass("row2");
		}else{
			$(this).addClass("row1");
		}
	}).click(function(){
		$(this).removeClass();
		$(this).addClass("rowselected");
	});
	$("table.RowOverMe thead tr").addClass("header");
	$("table.RowOverMe tbody tr:odd").addClass("row1");
	$("table.RowOverMe tbody tr:even").addClass("row2");
});

Casi igual que el tuyo pero comprobando :even. Verás que siempre devuelve true.

¿Dónde está el misterio? Pues que en la línea

Código:

 		if($(this).is(":even")){

$(this) es siempre el elemento único que se está tratando. Es decir, siempre es un único objeto. En una lista de 1, el primero siempre tiene índice 0, que es par siempre e impar nunca.

¿Por qué? Claramente por el ámbito de resolución de $(this), que se tiene que referir por fuerza al objeto actual, no a la lista devuelta por $("table tr").

¿Cómo solucionar esto sin repetir código?
Ya lo pensaré, ahora tengo fiebre. Sorry.


Nota: Sobre lo que decía más arriba del estilo que se pierde. Una solución es no añadir y quitar clases sino aplicar .css("background-color", "tal"); y no quitarlo, sólo aplicar.

[Un_Tico]

Hola VenkMan por lo de los estilos, eso es porque me faltó una parte del codigo en donde si la fila esta seleccionada y se activa el mouseover se pone un nuevo estilo como overselectedrow, pero por ahi iba , en fin, gracias por la aclaración de el porque siempre devuelve false, lo que hice para solucionarlo es esto.

Código:

var TheIndex = $("table.RowOverMe tbody tr").index(this);
if (TheIndex % 2 == 0) {
     //hacer algo con los pares
}else{
    //hacer algo con los Impares
}

Eso me solucionó el problemita

Gracias VenkMan y que sigas mejor...