0

fiddle link

how to append a div in to labels. within each radio group and its wrapper div.

I have a radio buttons group code generated dynamically, so I can't add static helper text to labels using HTML.

I am placing div under radio group div and adding div with helper text and wrapping each radio group with another div, then using append. I am adding its only helper text div to its labels using classes.

before screen before

After screen after



<div class="helperTextWrapper" >

<div class="radioTable">
 <div>
    <span>
       <label class="RadioButtonHelperText1">Yes</label>
   </span>
</div>
 <div>
    <span>
       <label class="RadioButtonHelperText2">No</label>
   </span>
</div>
</div>

<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
<div class="RadioButtonHelperTextLabel2">no helper text</div>

</div>

<div class="helperTextWrapper" >

<div class="radioTable">
 <div>
    <span>
       <label class="RadioButtonHelperText1">Yes</label>
   </span>
</div>
 <div>
    <span>
       <label class="RadioButtonHelperText2">No</label>
   </span>
</div>
    <div>
    <span>
       <label class="RadioButtonHelperText3">Not sure</label>
   </span>
</div>
</div>

<div class="RadioButtonHelperTextLabel1">Yes helper text</div>
<div class="RadioButtonHelperTextLabel2">no helper text</div>
<div class="RadioButtonHelperTextLabel3">not sure helper text</div>

</div>

I want to Append Yes helper text into Yes using jQuery like this but my script is adding multiple/duplicate divs:

   $("div.helperTextWrapper ").each(function(index) {

  $(this).find('.RadioButtonHelperTextLabel1').appendTo('.RadioButtonHelperText1');
   $(this).find('.RadioButtonHelperTextLabel2').appendTo('.RadioButtonHelperText2');
    $(this).find('.RadioButtonHelperTextLabel3').appendTo('.RadioButtonHelperText3');

    });


<div class="helperTextWrapper" >

<div class="radioTable">
 <div>
    <span>
       <label class="RadioButtonHelperText1">Yes
           <div class="RadioButtonHelperTextLabel1">Yes helper text</div>
        </label>
   </span>
</div>
 <div>
    <span>
       <label class="RadioButtonHelperText2">No
        <div class="RadioButtonHelperTextLabel2">no helper text</div>
        </label>
   </span>
</div>
</div>

</div>




<div class="helperTextWrapper" >

<div class="radioTable">
 <div>
    <span>
       <label class="RadioButtonHelperText1">Yes
           <div class="RadioButtonHelperTextLabel1">Yes helper text</div>
        </label>
   </span>
</div>
 <div>
    <span>
       <label class="RadioButtonHelperText2">No
        <div class="RadioButtonHelperTextLabel2">no helper text</div>
        </label>
   </span>
</div>
    <div>
    <span>
       <label class="RadioButtonHelperText3">Not sure
        <div class="RadioButtonHelperTextLabel3">not sure helper text</div>
        </label>
   </span>
</div>
</div>

</div>

````
gerald
  • 1
  • 1
  • https://jsfiddle.net/praveendubbaka/qoemfwgr/27/ – gerald Oct 11 '19 at 22:57
  • Are you trying to achieve: https://jsfiddle.net/hu3fzknr/18/ ? – Paul T. Oct 12 '19 at 01:38
  • I want to append
    Yes helper text
    into     – gerald Oct 12 '19 at 01:45
  • its should look like this – gerald Oct 12 '19 at 01:46
  • $(".RadioButtonHelperTextLabel1 ").each(function() { $(this).appendTo('.RadioButtonHelperText1'); }); $(".RadioButtonHelperTextLabel2 ").each(function() { $(this).appendTo('.RadioButtonHelperText2'); }); $(".RadioButtonHelperTextLabel3 ").each(function() { $(this).appendTo('.RadioButtonHelperText3'); }); – gerald Oct 12 '19 at 01:56
  • I believe that https://jsfiddle.net/98gwq7vr/8/ covers what you want. Takes an extra `find()` inside the `appendTo()` to keep the same container reference. – Paul T. Oct 13 '19 at 01:37
  • @PaulT. Perfect , thank you :-) – gerald Oct 15 '19 at 02:02

1 Answers1

0

$('.helperTextWrapper').each(function(){

$(this).find('.RadioButtonHelperTextLabel1').appendTo($(this).find('.RadioButtonHelperText1'));
$(this).find('.RadioButtonHelperTextLabel2').appendTo($(this).find('.RadioButtonHelperText2'));
$(this).find('.RadioButtonHelperTextLabel3').appendTo($(this).find('.RadioButtonHelperText3'));

});

https://jsfiddle.net/praveendubbaka/t71oae3b/46/

gerald
  • 1
  • 1