JQuery将div.class附加到它的标签上

时间:2017-06-21 06:35:22

标签: jquery html append each

我想将每个.quiz__control-feedback内容附加到与之关联的.mPos单选按钮上。这是每个标签之前的标签.mPos。我只显示类.mPos的相关选中的单选按钮。实际上每个无线电组有5个选项是正确的。在提交测验的那一刻.quiz__control-feedback测验在每个单选按钮组的末尾。

<p>
    <input type="radio" name="a01-q02" value="a01-01-q02" data-set="a01-q02" id="a01-q02-e03">
        <label for="a01-q02-e03" class="mPos">Only children with complex additional needs</label>
</p>
<div class="quiz__control-feedback quiz__control-feedback--incorrect">
    <span class="quiz__control-feedback-label">
        Incorrect
    </span>
</div>
<p>
    <input type="radio" name="a01-q04" value="a01-01-q04" data-set="a01-q04" id="a01-q04-e03">
    <label for="a01-q04-e03" class="mPos">If the family has not undertaken relevant training about the NDIS</label>
</p>
<div class="quiz__control-feedback quiz__control-feedback--correct">
    <span class="quiz__control-feedback-label">
        Correct
    </span>
</div>

我试过了:

$("label.mPos").each(function(){
    $(this).append( $('.quiz__control-feedback') );
});

但是,这会将.quiz__control-feedback的所有实例附加到第二个或最后一个选中的单选按钮。

我做错了什么?如果我需要添加更多信息,请告诉我。

1 个答案:

答案 0 :(得分:1)

试试这个,它会选择quiz__control-feedback之后的label并附加它。

$(this).parent()将选择p代码,之后使用.next()将选择quiz__control-feedback

&#13;
&#13;
$("label.mPos").each(function() {
  $(this).append($(this).parent().next('.quiz__control-feedback'));
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <input type="radio" name="a01-q02" value="a01-01-q02" data-set="a01-q02" id="a01-q02-e03">
  <label for="a01-q02-e03" class="mPos">Only children with complex additional needs</label>
</p>
<div class="quiz__control-feedback quiz__control-feedback--incorrect">
  <span class="quiz__control-feedback-label">
        Incorrect
    </span>
</div>
<p>
  <input type="radio" name="a01-q04" value="a01-01-q04" data-set="a01-q04" id="a01-q04-e03">
  <label for="a01-q04-e03" class="mPos">If the family has not undertaken relevant training about the NDIS</label>
</p>
<div class="quiz__control-feedback quiz__control-feedback--correct">
  <span class="quiz__control-feedback-label">
        Correct
    </span>
</div>
&#13;
&#13;
&#13;