[JQUERY] Selezionare tutti gli elementi

[LostCore]

Ciao a tutti, espongo velocemente il mio problema:

In una pagina io ho occorrenze multiple di:

	<div id="images">
		<div id="imagencap" style="float:left;">
			[img]nomedelFile.jpg[/img]
			<p id="id_descrizione">
			descrizione_Dell'Immagine
			</p>
		</div>
	</div>

Vorrei fare in modo, che quando si clicca su "descrizione_Dell'Immagine" il

venga sostituito con una textarea editabile, con all'interno il contenuto che apparteneva al

.

Di conseguenza, ho creato questo javascript:

	$("#images").find("#imagencap")
	.click(function(e){

		if($(this).children().is("textarea")){ return; }

		var myP = $(this).find("p");
		var myCaption = myP.text();
		var myId = myP.attr("id");

		var textarea = "<textarea id="+myId+">"+myCaption+"</textarea>";
		var buttons = "[SAVE] [CANCEL]";
		myP.hide();
		myP.before("
"+textarea+"
"+buttons);
	});

... che funziona. Mi crea la textarea e mi nasconde il

. MA, funziona solo con la prima occorrenza della pagina. Le altre vengono tralasciate!

Come posso fare?

Grazie mille!

[Mega69]

Non puoi avere nella stessa pagina elementi con lo stesso id, semmai con la stessa classe

	$(".images").find(".imagencap")
	.click(function(e){

		if($(this).children().is("textarea")){ return; }

		var myP = $(this).find("p");
		var myCaption = myP.text();
		var myId = myP.attr("id");

		var textarea = "<textarea class="+myId+">"+myCaption+"</textarea>";
		var buttons = "[SAVE] [CANCEL]";
		myP.hide();
		myP.before("
"+textarea+"
"+buttons);
	});

La stessa cosa va fatta nell'html, ove c'è id sostituisci class

[LostCore]

Questa proprio non la sapevo... che niubbo! Grazie mille! ^^

Edit: un altro problema a cui non riesco a venire a capo, questa volta più serio però :P

	$(".imagencap").bind("click", function(){
		//if($(this).children().is("textarea")){ return; } //return if textarea is already created
		var myP = $(this).find("p");
		var myCaption = myP.text();
		var myId = myP.attr("id");
		//alert(myId+": "+myCaption);
		var textarea = "<textarea id="+myId+" cols='9' rows='9'>"+myCaption+"</textarea>";
		var buttons = "<span class='savencancel'>[SAVE] [CANCEL]</span>";
		myP.hide();
		myP.before("

"+textarea+""+buttons);

		$(this).find("span").find("a").bind("click", function(e){
    		e.preventDefault();
    		if($(this).attr("href") == "#save"){
    			//alert("salvo!");
    		}
    		if($(this).attr("href") == "#cancel"){
    			//alert("cancello!");
    			$(this).parent().hide("slow");
    			$(this).parents(".imagencap").children("textarea").hide("slow");
    			//$(this).parents(".imagencap").children("textarea").remove();
    			$(this).parents(".imagencap").find("p").show();

    		}
    	});
	});

Dunque, come si può evincere dallo script, in fondo alla textarea ci sono un link SAVE e uno CANCEL. Se si clicca quest'ultimo, la textarea viene nascosta insieme al pulsante.

Il problema è che cliccando su cancel, mi prende il click anche nel div e quindi se rimuovo la textarea, me ne ricrea subito un'altra, se la nascondo solamente, visto che poi me la trova, non mi permette più di modificare.

Qualche idea? Grazie mille!