Check if div is last and show button

Question

Hey guys. I have a quiz script, that has questions in different divs, they come one after another, and I want that when the last div fadesIn it would show submit button instead of a next question button.

Here's my js.

    $('#questions').ready(function(){

    for (i = 1; i < 100; i++) {
      if ($('#question' + i).length > 0) {
            $('#question' + i).hide();


  } else {
            break;
        }

  }



});


function transition(question_id) {

    $('#question' + question_id).fadeOut('fast',function() {
           question_id++;
        if ($('#question' + question_id).length > 0) {
           $('#question' + question_id).fadeIn('fast');

        } else {
            $('#test').submit();
  } return false;

    });

}

Here's my html :

<div class="questions"> 
        <div id="question0" class="question">
<span class="qutitle">asdg asdg</span> <br /> 

         <FIELDSET> 


               <br />   <input id="q_0" type="radio" name="q_0" value="0"> sdgas                       <br /> 



               <br />   <input id="q_0" type="radio" name="q_0" value="2">dgasdg                       <br /> 



               <br />   <input id="q_0" type="radio" name="q_0" value="1">dgas                       <br /> 

</FIELDSET><input type="button"  onclick="javascript: transition(0);" value="">
</div> 
        <div id="question1" class="question"><span class="qutitle">asdgasd</span> <br /> 

         <FIELDSET> 


               <br />   <input id="q_1" type="radio" name="q_1" value="0">gasdg                       <br /> 



               <br />   <input id="q_1" type="radio" name="q_1" value="2">asdgasdg                       <br /> 



               <br />   <input id="q_1" type="radio" name="q_1" value="1">sdgasdg                       <br /> 

</FIELDSET><input type="button"  onclick="javascript: transition(1);" value="">
</div> 
        <div id="question2" class="question"><span class="qutitle">sgasdgasd</span> <br /> 

         <FIELDSET> 


               <br />   <input id="q_2" type="radio" name="q_2" value="1">asdgsad                       <br /> 



               <br />   <input id="q_2" type="radio" name="q_2" value="2">gasdg                       <br /> 



               <br />   <input id="q_2" type="radio" name="q_2" value="0">gasdg                       <br /> 

</FIELDSET><input type="button"  onclick="javascript: transition(2);" value=""></div>

Any kind of help is appreciated.

Thank you.

Answer 1

questions = $('.question').length; // total number of questions

Then I guess you could do something like:

if(questions-1 == question_id){
    //Show submit button & hide next button
}

Also, in the beginning, you could just do $('.questions').hide(), instead of the for loop.

Answer 2

$('div[id *= "question"]:last') will get the last div with "question" on the id.

Edit:

To show the button, you can do this:

$('div[id *= "question"]:last').children('input[type == "button"]).fadeIn('fast')