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

Question

我想将每个 .quiz__control-feedback 内容附加到与其关联的 .mPos 单选按钮。这是每个带有 class .mPos 的标签。我只显示带有 class .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 的所有实例附加到第二个或最后一个选中的单选按钮。

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

Answer 1

试试这个，它会 select 紧跟在 label 之后的 quiz__control-feedback 并追加它。

$(this).parent() 将 select p 标签，然后使用 .next() 将 select quiz__control-feedback class

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

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

JQuery append div.class to it's label

html

each

jquery

append