Display Description of choice column type on top

Question

I have created a list with type Choice and set Description for the same. I have set Radio Buttons as "Display Choices Using". When i click on Add New item the Description is shown at the bottom. Is there any way we can show the description on "Top" using Jquery/Designer/CSS with out loosing the UI Format. Attached image is an example

I know we can do it through infopath but i have some Java script in the Edit item.aspx page so using Infopath doesnot suite this requiremen

Answer 1

I'm sure there is room for improvement, but here is a working sample.

jQuery(document).ready(function () {

    //narrow down matching to dialog boxes only
    if(location.href.indexOf('IsDlg=1') !== -1)
        {
           $(".ms-dialog td.ms-formbody > span > table > tbody > tr:first-child > td > span.ms-RadioText").each(function(){

               //console.log('found the first option of the current choice list');

               var descriptionElement = $(this).closest('.ms-formbody').contents().filter(function(){ return this.nodeType != 1; });
               var descriptionText = $(descriptionElement).text();
               $(descriptionElement).remove();
               $(this).closest('.ms-formbody').prepend('<span>' + descriptionText + '</span>');

           });
    }
 });

Answer 2

Thanks for Tiago for providing the solution. So here is the code if you want to move description up for Multiple lines of text.

$("td.ms-formbody > span > textarea.ms-long").each(function(){


 var descriptionElement = $(this).closest('.ms-formbody').contents().filter(function(){ return this.nodeType != 1; });
  var descriptionText = $(descriptionElement).text();
   //alert(descriptionText);
 $(descriptionElement).remove();
 $(this).closest('.ms-formbody').prepend('<span>' + descriptionText + '</span>');
 $('.ms-long').css({'height':'auto','display':'block','margin-top':'10px'});
});