Foros del Web » Programando para Internet » Jquery »

jQuery con muchos divs - Modificar elemento

Estas en el tema de jQuery con muchos divs - Modificar elemento en el foro de Jquery en Foros del Web. Hola, soy nuevo en esto del JavaScript, a ver si me pueden echar una mano Explico mi problema, verán, tengo una lista de archivos, puede ...
  #1 (permalink)  
Antiguo 02/12/2012, 16:25
Avatar de Adrii952  
Fecha de Ingreso: diciembre-2011
Ubicación: Madrid
Mensajes: 116
Antigüedad: 12 años, 3 meses
Puntos: 7
jQuery con muchos divs - Modificar elemento

Hola, soy nuevo en esto del JavaScript, a ver si me pueden echar una mano

Explico mi problema, verán, tengo una lista de archivos, puede ser de un archivo, de 5, de 20, de 50, da igual. El nombre de cada archivo está dentro de un <div class="nombre"> para darle formato con CSS.
Cada archivo tiene un botón de 'Renombrar'. El botón (en realidad es texto) de renombrar está dentro de un <div class="renombrar"> para el script.

Quiero que cuando se pulse ese botón, lo que hay dentro del <div class="nombre"> (nombre del archivo), se cambie por otra cosa, la cosa no es relevante pero es un input con el nombre actual para modificarlo y un botón de enviar que enviará el nuevo nombre por POST con AJAX.

El problema está en que no sé cómo hacer que al pulsar el botón de renombrar de un archivo, se cambie lo del <div class="nombre"> de ese archivo.

Sé cómo hacerlo para un sólo elemento <div> pero no para varios, ya saben, con ids o clases en el script, así:
Código:
<script type="text/javascript">
	$(document).ready(function() {
		$(".renombrar").click(function() {
			$(".nombre").html("My text is changed!");
		});
	});
</script>
Podría solucionarlo evidentemente con un <div id> individual para cada archivo pero no es plan porque entonces el código script sería énorme y no es plan. Me imagino que alguna solución habrá a esto, espero que puedan ayudarme.

Gracias

Última edición por Adrii952; 02/12/2012 a las 16:31
  #2 (permalink)  
Antiguo 02/12/2012, 17:11
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 18 años, 11 meses
Puntos: 839
Respuesta: jQuery con muchos divs - Modificar elemento

Podrías tener un id que relacione ambos (renombrarN y nombreN)

Otra opción es ver cómo está el DOM y a partir del selector apropiado acceder a él, ¿podrías mostrarnos la relación en el documento entre ambos div? Cómo están en el HTML
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 02/12/2012, 17:46
Avatar de Adrii952  
Fecha de Ingreso: diciembre-2011
Ubicación: Madrid
Mensajes: 116
Antigüedad: 12 años, 3 meses
Puntos: 7
Respuesta: jQuery con muchos divs - Modificar elemento

Estaba modificando mi código HTML para que lo leyeras de manera simple, he ido a probarlo antes de postearlo y resulta que hace exactamente lo que buscaba.

._.

No sé cómo no lo he visto antes, ha debido ser una tontería que al modificar en un descuido ha empezado a funcionar de pura casualidad!

Bueno, dejo el código:
Código HTML:
<script src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	  $(".renombrar").click(function(e) {
		$(this).parents().siblings(".nombrearchivo").html("My text is changed!");
		e.preventDefault();
	  });
	});
</script>

<div class="caja">
	<p>
		Archivos
	</p>
	<div class="separador"></div>
	<div class="archivo">
		<div class="nombrearchivo">
			<a href="?f=descargar&id=2">
				<b>Archivo1.pdf</b>
			</a>
		</div>
		<div class="fechayaccionescomentario">
			<a class="renombrar">
				Renombrar
			</a>
		</div>
	</div>
	<div class=separador></div>
	<div class="archivo">
		<div class=nombrearchivo>
			<a href="?f=descargar&id=1">
				<b>Archivo2.pdf</b>
			</a>
		</div>
		<div class="fechayaccionescomentario">
			<a class="renombrar">
				Renombrar
			</a>
		</div>
	</div>
	<div class="separador"></div>
</div> 
Todavía no he terminado, tengo que encontrar la forma de enviar el nombre al jQuery para que me lo meta en un input, a ver si me podéis ayudar con eso o abro otro post? Gracias

Edit: Ya lo he conseguido yo solo:
Código:
$(this).parents().siblings(".nombrearchivo").html('<input type="text" value="' + document.getElementsByClassName("nombre")[0].innerHTML + '">');
.

Última edición por Adrii952; 02/12/2012 a las 18:36

Etiquetas: ajax, divs, elemento, html, input, modificar, muchos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:24.