Adding ID's to inputs - how?

Hi all.


I've just started using jQuery so bear with me.



We have an old interviewing system that spits out some auto-generated HTML code including these inputs (the only user-inputs are the texts (Text1-6)):



<span class="mrSingleText">

<input type=radio class="mrSingle" name=LIST9 value=10>Text1</span><br>

<span class="mrSingleText">

<input type=radio class="mrSingle" name=LIST9 value=11>Text2</span><br>

<span class="mrSingleText">

<input type=radio class="mrSingle" name=LIST9 value=12>Text3</span><br>

<span class="mrSingleText">

<input type=radio class="mrSingle" name=LIST9 value=13>Text4</span><br>

<span class="mrSingleText">

<input type=radio class="mrSingle" name=LIST9 value=14>Text5</span><br>

<span class="mrSingleText">

<input type=radio class="mrSingle" name=LIST9 value=15>Text6</span>


As we would like to have our users being able to click the text next to the buttons, our idea was to use the <label for="x">Text x</label> function, but as this requires an ID on the inputs, we need to add ID's to the inputs; the input with "value=10" gets "id=10" and the input with "value=11" gets "id=11" and so on. And this needs to be executed on document.ready/body onload or something similar. Preferable this would be dynamic but we are not opposed to x seperate scripts as long as they are execute simultaneously.



Any help would be greatly appreciated.

 

<script type="text/javascript">
$(document).ready(function() {

$("input[type=radio]").each(function() {
  var getVal = $(this).val();
  //$("input").attr('value',getVal);
  $(this).attr('id',getVal);
  $(this).parent('span').prepend('<label for="'+getVal+'">'+'Text '+getVal+'</label>');
});
});
</script>

Code (markup):

 

That's perfect. Works like a charm - you might just have saved our company ^^ Thanks alot!

 

Would appreciate a "Best answer" if that's the case

 

Couldn't find the "best answer"-button the first time - sorry! Thanks a lot - i found it and used it!

 

One last thing:

I figured out that we should append instead of prepend, but is there a way to append to the input tag instead of the parent span tag?
$(this).parent('span').prepend('<label for="'+getVal+'">'+'Text '+getVal+'</label>');

So the result is like this:
<span><input type="radio" class="mrSingle" name="LIST10" value="11" id="11"><label for ="11">Text 11</label></span>

 

This should work, if you want to have the label after the input:

<script type="text/javascript">
$(document).ready(function() {
   $("input[type=radio]").each(function() {
       var getVal = $(this).val();
       $(this).attr('id',getVal);
       $("#"+getVal+"").after('<label for="'+getVal+'">'+'Text '+getVal+'</label>');
     });
});
</script>

Code (markup):

Note that the text displaying will show up right after the label, so you might want to add some CSS to that, if you want it to move away a little bit.

 

Once again perfect. Thanks!