Debe ser una pavada pero no entiendo porque (Jquery y Selectores)

taka · #1 (**permalink**) 21/04/2009, 12:45

Hola gente del foro
recien empiezo con Jquery y estoy viendo un video tutorial para aprender

tengo este codigo que armé para practicar y no funciona (abajo lo pego)

si saco "#cantidad" del codigo del style y del script funciona pero se aplica a todos los span cuando yo quiero que solo sepalique a los que estan dentro de "cantidad"

imagino que tendrá que ver con la fomar de escribir los selectores DOM pero no entiendo porqué está mal

lo que intenta hacer el codigo es darle un color de fondo a los span con css y cambiar el color del ultimo span que está dentro del elemento con id "cantidad" aplicandole otro estilo.

gracias por ayudarme
saludos

Código:

<html>
<head>
<script llamada a jquery.js>

<style type="text/css">
#cantidad span {

	margin: 6px;

	width: 50px;
	font-family: Tahoma;
	font-size: 14px;

	background-color: #ff0000;
	color: #ffffff;
	text-align: center;
	cursor: pointer;
	font-weight: bold;
}


.otro-color {
	color: #000000;
	background-color: #00ffff;
}
</style>



<script>
$(document).ready(function() {
	$('#cantidad span:last').addClass('otro-color');
});
</script>


</head>
<body>


	<div id="cantidad">
		<span>500</span>
		<span>1000</span>
		<span>2000</span>
		<span>5000</span>
		<span>10000</span>
	</div>

	<div id="color">
		<span>rojo</span>
		<span>amarillo</span>
		<span>verde</span>
		<span>azul</span>
	</div>

</body>
</html>

#2 (**permalink**) 21/04/2009, 13:25

Código css:

Ver original.otro-color {
    color: #000000 !important;
    background-color: #00ffff !important;
}

MiLLeN · #3 (**permalink**) 21/04/2009, 13:27

Estas insertando una clase css en un documento que tiene ya unas propiedades css dadas por plantilla, es decir, traducido a codigo, estas añadiendo una clase a ese elemento spam, y la clase se añade, pero como tiene ya una clase por plantilla asignada, esta tiene mayor prioridad, tienes varias opciones de solucionarlo:

1ª, la mas sencilla, poniendo los elemntos de la clase como "!important", asi:

Código:

.otro-color {
	color: #000000 !important;
	background-color: #00ffff !important;
}

2ª, reemplazando directamente las propiedades del elemto css "#cantidad spam" a traves de jQuery.css() directamente, asi:

Código:

<script language="javascript" type="text/javascript">
$(document).ready(function(){
	//$('#cantidad span:last').addClass('otro-color');
	$("#cantidad > span:last").css({"color":"#000000", "background-color":"#00ffff"});
});
</script>

Un saludo.

taka · #4 (**permalink**) 21/04/2009, 13:56

muchas gracias Vekman y Millen (muy clara y didactica tu respuesta)
saludos