2017-06-21 75 views
0

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

<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反馈所有实例第二或最后一次检查单选按钮。

我在做什么错?如果我需要添加更多信息,请让我知道。

回答

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>

+0

嗨卡斯滕遗憾的是,没有工作。我会再玩一些。无论如何:-) –

+0

@LaurenceL你确定你的代码看起来像你的页面上的代码,如果你想要的话,确保你的代码是100%等于你的代码段中的例子 –

+0

HI Carsten我现在再次经历它。它是一个开发人员,我必须更新。使我抓狂。我只注意到.quiz__control-feedback会动态添加,这会影响结果。 –