2017-06-21 84 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會動態添加,這會影響結果。 –