针对jQuery中的最后一个孩子

Question

I have created a jquery questionnaire, when the user clicks on the radio button it navigates to the next question click here . On the last question a submit button is visible, however if you click on the the last radio button all content disappears. Is there a way to deactivate the next() function when the user gets to the last question.

            $('.responsible-gaming__body input').click(function () {
            selfAssessmentTotal += parseInt($(this).val());
            var parentContainer = $(this).parents('.responsible-gaming__parentContainer');
            parentContainer.hide();
            parentContainer.next('.responsible-gaming__parentContainer').show();
        });

Answer 1

use next('.responsible-gaming__parentContainer').length to see the next element existance. If it is then execute the next click code else do nothing:

if(parentContainer.next('.responsible-gaming__parentContainer').length){
   //next element exist....add code here
}

complete code:

$('.responsible-gaming__body input').click(function () {
        selfAssessmentTotal += parseInt($(this).val());
        var parentContainer = $(this).parents('.responsible-gaming__parentContainer');
        if(parentContainer.next('.responsible-gaming__parentContainer').length){
           parentContainer.hide();
           parentContainer.next('.responsible-gaming__parentContainer').show();
        }
 });

Answer 2

if(!parentContainer.next('.responsible-gaming__parentContainer').length){
//do your stuff here
}

Answer 3

if(parentContainer.next('.responsible-gaming__parentContainer').length){
       parentContainer.hide();
       parentContainer.next('.responsible-gaming__parentContainer').show();
 }

DEMO

Answer 4

Change your selector for click function to

$('.responsible-gaming__parentContainer:not(:last-child) input')

instead of

$('.responsible-gaming__body input')

This makes your code become simpler to:

$('.responsible-gaming__parentContainer:not(:last-child) input').click(function () {
  selfAssessmentTotal += parseInt($(this).val());
  $(this).parent().parent().hide();
  $(this).parent().parent().next('.responsible-gaming__parentContainer').show();
});

Answer 5

Only hide the parentContainer once the next container is shown (this won't happen if there isn't a next container):

$('.responsible-gaming__body input').click(function () {
    selfAssessmentTotal += parseInt($(this).val());
    var parentContainer = $(this).parents('.responsible-gaming__parentContainer');
    parentContainer.next('.responsible-gaming__parentContainer').show(0, function() {
        parentContainer.hide();
});

JSFiddle