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

Question

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

<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 的所有实例附加到第二个或最后一个选中的单选按钮。

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

Answer 1

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

$(this).parent() 将选择p 标记，然后使用.next() 将选择quiz__control-feedback 类

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

<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>