jquery ID of previous dynamically added text area

Question

Hi

I'm attempting to hack a wordpress plugin to gain some extra functionality.

As it stands i've adjusted it so I can add a new textarea with it's own upload box.

I now need a way to get the ID of the new textarea, so I can pass the uploaded file text back to the correct textarea.

this is my code:

JQUERY:

<script type="text/jquery">
jQuery(document).ready(function() {

jQuery('#upload_image_button').live("click", function() {
 var tblID = jQuery(this).closest("textarea").attr("id");
 alert(tblID); // returns undefined.


 formfield = jQuery('#upload_image').attr('name');
 tb_show('','media-upload.php?type=image&TB_iframe=true');
 return false;
});
</script>

as it stands, this doesn't work. I get "undefined", rather than the ID of the text area as I hoped.

the markup for each DIV that gets added is like this, where * indicates a unique number:

<div id="my*Div>
<textarea class="dfrads_textarea" id="dfrads_textarea_*" name="ad_*">
  <!-- my content -->
</textarea>
Upload:
<label for="upload_image"><input type="text" value="" name="upload_image_*" size="36" id="upload_image_*"><input type="button" value="Upload Image" id="upload_image_button_*"><br>Enter an URL or upload an image for the banner.</label>
</div>

so if I add 2 extra DIVs, the * would be "2" in this example. (The second DIV).

How can I get the value of the ID of the textarea that is "paired" with the submit button.

thanks ! I have tried .prev and .closest, but presumably am using it wrongly.

Answer 1

Since it's not inside the <textarea> you need to traverse a bit differently, replace this:

jQuery(this).closest("textarea").attr("id");

With this:

jQuery(this).closest("label").prev("textarea").attr("id");

This goes up to the <label> then back to the <textarea> previous sibling...your selector isn't quite right on the .live() call, at least not for the markup, but if you're getting an alert at all I'll assume it's just not quite as posted and is working correctly.