Ayuda con JQuery, Elementos mismo ID

pbarros · #1 (**permalink**) 19/11/2009, 14:03

Estimados, tengo un problema, necesito tener un "arreglo" de elementos, para ello utilizo el mismo id para luego recorrerlo con each... pero no me resulta, siempre me dice que tengo largo 1.

Parte de la función:

Código:

$("#rotulo").each(function(i) {
	alert("item #" + i + ": ")
});

Elementos:

Código:

<table>
	<tr>
		<th class="CF">&nbsp;</th>
		<td class="CD" id="rotulo" number="1"></td>
		<td class="CD" id="rotulo" number="2"></td>
		<td class="CD" id="rotulo" number="3"></td>
		<td class="CD" id="rotulo" number="4"></td>
		<td class="CD" id="rotulo" number="5"></td>
	</tr>
</table>

Lo que intento saber es:
Estando sobre "rotulo 3" por ejemplo, saber si existe otro rotulo (en esta caso hay 5) para poder hacer alguna operación en él.
Pobé con:

Código:

$("#rotulo").length

y me arroja que tengo sólo 1 elemento.

Espero me puedan ayudar

Rosencrantz · #2 (**permalink**) 19/11/2009, 14:43

El ID de un elemento debe ser unico en todo el DOM, es probable que te funcione pero no suele usarse y puede acarrear problemas, trata de recorrer usando la clase en vez de el id.

$('.CD').length... tal vez.

pbarros · #3 (**permalink**) 19/11/2009, 15:31

Si sé que debería usar una sola id para que no tenga problema... pero no sé como hacer esto de otra forma.

Cita:

Iniciado por Rosencrantz

$('.CD').length... tal vez.

La clase la estoy usando para el estilo gráfico, tamaño, etc., y puedo usarla en otros elementos que no corresponden a este grupo.

La idea es una especie de grilla... y por un tema de funcionalidad, lo mejor es tener las celdas con id único... es la única forma que se me ocurre.

Les envío el código mejor, puede servir de idea y así pueden ayudarme más.

Código del script:

Código HTML:

<script type="text/javascript">
$(function(){
	$("td").focus(function(){
		switch (this.type) {
			case 'TN':
				valor = $(this).attr("value");
				tamano = $(this).css("width");
				if (typeof valor == "undefined") valor = "";
				this.innerHTML = '<input name="Control" id="Control" type="text" value="' + valor + '" style="width: ' + tamano + '" onblur="control_LostFocus(this)" onkeyup="control_KeyPress(this)" />';
				$("#Control").focus();
				$("#Control").focus();
				break;
			case 'CH':
				valor = $(this).attr("value");
				if (valor == "Si")
					valor = "checked"
				else
					valor = "";
				this.innerHTML = '<input name="Control" id="Control" type="checkbox" checked="' + valor + '" onblur="control_LostFocus(this)" onkeyup="control_KeyPress(this)" />';
				$("#Control").focus();
				$("#Control").focus();
				break;
			case 'CB':
				valor = $(this).attr("value");
				texto = '';
				texto += '<select name="Control" id="Control" style="width: ' + tamano + '" onblur="control_LostFocus(this)" onkeyup="control_KeyPress(this)" >';
				if (valor == 0 || valor == "undefined")
					texto += '<option value="0" selected="selected"></option>'
				else
					texto += '<option value="0"></option>';
				if (valor == 1)
					texto += '<option value="1" selected="selected">Funcionando</option>'
				else
					texto += '<option value="1">Funcionando</option>';
				if (valor == 2)
					texto += '<option value="2" selected="selected">Incorrecto</option>'
				else
					texto += '<option value="2">Incorrecto</option>';
				texto += '</select>';
				this.innerHTML = texto;
				$("#Control").focus();
				$("#Control").focus();
				break;
		}
	});
});
function control_LostFocus(e) {
	tipo = $(e).parent().attr("type");
	numero = $(e).parent().attr("number");
	id = $(e).parent().attr("id");
	switch (tipo) {
		case 'TN':
			valor = $(e).val();
			$(e).parent().attr("value", valor);
			$(e).parent().html(valor);
			break;
		case 'CH':
			valor = $(e).attr("checked");
			if (valor == "checked" || valor == "on" || valor == true)
				texto = "Si"
			else
				texto = "";
			$(e).parent().attr("value", valor);
			$(e).parent().html(texto);
			break;
		case 'CB':
			valor = $(e).val();
			texto = $("#" + $(e).attr("name") + " :selected").text();
			$(e).parent().attr("value", valor);
			$(e).parent().html(texto);
			break;
	}
}
function control_KeyPress(e) {
	tipo = $(e).parent().attr("type");
	numero = $(e).parent().attr("number");
	id = $(e).parent().attr("id");
	if (window.event.keyCode==13) {
		if ($("[id=" + id + "]").length > numero) {
			$("[id=" + id + "][number=" + (parseInt(numero) + 1) + "]").focus();
		}
		else {
			$(e).blur();
		}
	}
}
</script>

Estilo:

Código HTML:

 <style type="text/css">
		* { margin: 0; padding: 0; font: 11px "Arial"; }
		th { background-color: #786654; }
		td { background-color: #CE9D6C; }
		table { cell-spacing: 0.05em; background-color: #000000;}
		.CF { width: 30px; }
		.CD { width: 80px; }
	</style>

HTML:

Código HTML:

<table>
    <tr>
        <th class="CF">&nbsp;</th>
        <td class="CD" id="rotulo" number="1" type="CH" value=""></td>
        <td class="CD" id="rotulo" number="2" type="TN" value=""></td>
        <td class="CD" id="rotulo" number="3" type="TN" value=""></td>
        <td class="CD" id="rotulo" number="4" type="TN" value=""></td>
        <td class="CD" id="rotulo" number="5" type="CB" value=""></td>
    </tr>
</table>

Rosencrantz · #4 (**permalink**) 19/11/2009, 16:38

Aun no se si te entendi bien pero hice lo siguiente y me funciona y ademas cada id de rotulo es diferente, puedes probar el ejemplo he aqui el codigo:

Código PHP:

      <table id="tblRotulos" border="1"> 
        <tr> 
            <td id="rotulo1">1</td><td>2</td><td>3</td> 
        </tr> 
        <tr> 
            <td>4</td><td id="rotulo2">5</td><td>6</td> 
            </tr> 
        <tr> 
            <td id="rotulo3">7</td><td>8</td><td>9</td> 
        </tr>         
    </table>

Una tabla con 9 elementos, 3 de los cuales tienen id rotulo mas un numerito, lo que hice fue que al hacer click en cualquier celda las celdas con id que empiecen por rotulo se pongan rojas y que muestre un alert con el numero de elementos usando el .lenght.

El jquery

Código PHP:

  $(document).ready(function(){ 
 
            $('#tblRotulos td').click(function(){ 
                //alert('hi'); 
                $('#tblRotulos td[id^=rotulo]').css('background','red'); 
                alert($('#tblRotulos td[id^=rotulo]').length) 
            }); 
 
)};

Espero te sirva,saludos.

pbarros · #5 (**permalink**) 19/11/2009, 18:14

Me explico:

El código, es una especie de grilla, y cada TD es una celda que contiene controles, ya sean textbox, combobox, checkbox, etc. Al hacer click en una celda, aparece el control, el cual por defecto toma el valor que guardo en la misma celda, y ésta, al perder el foco, escribe el valor en la celda, tanto en la propiedad definida por mi, value en este caso, como en su contenido.
Con la tecla enter paso de una celda a otra.
Ésto es para no usar N controles (uno por cada celda) y también le da un aspecto mejor a la grilla.
No quise usar script ya hechos ya que es algo más puntual.

Gracias Rosencrantz...

Sirve en parte... sólo lo leí, no lo he corrido, ya que ahora estoy trabajando en otra cosa... mañana tendré algo más de tiempo y lo probaré.
Les aviso si me sirvió, o más bien dicho, si me resulta y si alguien quiere, subo el nuevo código.

Con un par de modificaciones, mi código quedó resuelto, con ID únicos, gracias a todos.