javascript - 在标签中 append div 作为帮助文本。在每个 radio 组及其包装器 div 中

Question

fiddle link

我想在标签中 append 一个 div 作为辅助文本。在每个 radio 组及其包装器 div 中。

我有一个动态生成的单选按钮组代码，所以我无法使用 HTML 将静态帮助文本添加到标签。

我将 div 放在单选组 div 下，并添加带有辅助文本的 div，并用另一个 div 包裹每个单选组，然后使用追加。我正在使用类将它唯一的帮助文本 div 添加到它的标签中。

屏幕前before

屏幕后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>

我想像这样使用 jQuery 将 Yes 帮助文本 append 到 Yes 中，但我的脚本添加了多个/重复的 div:

   $("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>

````

Answer 1

$("div.radioTable").each(function() {
  $(this).parents(".helperTextWrapper").each(function(index) {
   $(this).find('.RadioButtonHelperTextLabel1').appendTo('.RadioButtonHelperText1');
   $(this).find('.RadioButtonHelperTextLabel2').appendTo('.RadioButtonHelperText2');
    $(this).find('.RadioButtonHelperTextLabel3').appendTo('.RadioButtonHelperText3');
  });
});