You can't have multiple elements with the same ID. That's why it only works
for the first one. Use classes instead.
That should be a straightforward change for the most part, the one exception
being the part where you grab the ID of the P element and assign that same
ID to the new TEXTAREA. Not sure what the intent there is.
Couple of little tips... With classes, $("#images").find("#imagencap") would
be $(".images").find(".imagencap"), but you can simplify that (or any
similar code) to $(".images .imagencap"), just like you would do in CSS.
Also, I find it helpful to use a $ prefix on variables that contain jQuery
objects. The $ reminds me that it's a jQuery object, and makes the code
where I use it look more like a jQuery call, e.g.
var $p = $(this).find("p");
var myCaption = $p.text();
Just a stylistic thing, but you might try it and see if you like it.
-Mike
> In a page, i've multiple occurrence of:
>
> [code]
> <div id="images">
> <div id="imagencap" style="float:left;">
> <img src="fileName.jpg" />
> <p id="caption_id">
> caption_text
> </p>
> </div>
> </div>
> [/code]
>
> I would do, that when i click on a "caption_text", the
> relative paragraph tag hide, and a textarea appears, with the
> text of the <p>.
>
> Then, i've scripted this:
>
> [code]
> $("#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 = "[<a href='#'>SAVE</a>] [<a
> href='#'>CANCEL</a>]";
> myP.hide();
> myP.before("<br />"+textarea+"<br />"+buttons);
> });
> [/code]
>
> ... That works!. But only for the first occurrence!
>
> Where is the problem?
>
> Thanks :)
>
