jQuery con muchos divs - Modificar elemento

[Adrii952]

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

[David]

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

[Adrii952]

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 + '">');
.