JQuery не подбирая правильное значение из PHP для цикла

Question

Мой for цикл в PHP выглядит следующим образом:

for ($i=1;$i<=10;$i++) { 
?> 
    <input type="hidden" class="ThisQuestion" id="GetQuestion-<?php echo $i; ?>" value="<?php echo $i; ?>" /> 
    <a href="javascript:void(0)" class="VerySmallFont"> 
      <div class="SelectNumberBox <?php echo $NumberBoxClass; ?>"><?php echo $i; ?></div> 
    </a> 

Теперь я хочу, чтобы извлечь значение $i из PHP в Jquery. Вот что я делаю в JS части для этого -

<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
    $(".VerySmallFont").click(function(){ 
     var $Parent    = $(this).parent();      
     var ThisQuestionNumber = $Parent.find('[id^="GetQuestion-]:first').val(); 
     var TestID  = $("#GetTestID").val(); 
     var ShowCQ = '1'; 
     $.ajax({ 
      type : 'GET', 
      url:'getquestiondata.php', 
      data : {TestID: TestID, ShowCQ: ShowCQ, ThisQuestionNumber: ThisQuestionNumber}, 
      success:function(data) { 
       $("#LoadingImage").hide(); 
       $('#ShowQuestion').html(data); 
      } 
     }); 
    }); 
}); 
</script> 

Я не получаю значение вар ThisQuestion в моей JS. Я также попытался использовать класс ThisQuestion вместо селектора id GetQuestion, но это тоже не сработает. Я не уверен, какая ошибка, которую я делаю, это.

Answer 1

Посмотрев на свою разметку, кажется, вы указываете неправильный элемент. В вашем jquery вы указываете на родителя. Вы должны указать на предыдущего брата, который является скрытым входом.

var hidden = $(this).prev(); // point the input 
var ThisQuestionNumber = hidden.val(); 

Full:

<?php 
for ($i=1;$i<=10;$i++) { 
?> 
    <input type="hidden" class="ThisQuestion" id="GetQuestion-<?php echo $i; ?>" value="<?php echo $i; ?>" /> 
    <a href="javascript:void(0)" class="VerySmallFont"> 
      <div class="SelectNumberBox <?php echo $NumberBoxClass; ?>"><?php echo $i; ?></div> 
    </a> 
<?php } ?> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 

    $(".VerySmallFont").click(function(){ 

     var hidden = $(this).prev(); 
     var ThisQuestionNumber = hidden.val(); // point to the previous sibling 
     var TestID = $("#GetTestID").val(); 
     var ShowCQ = '1'; 
     $.ajax({ 
      type : 'GET', 
      url:'getquestiondata.php', 
      data : {TestID: TestID, ShowCQ: ShowCQ, ThisQuestionNumber: ThisQuestionNumber}, 
      success:function(data) { 
       $("#LoadingImage").hide(); 
       $('#ShowQuestion').html(data); 
      } 
     }); 
    }); 
}); 
</script> 

Demo