проблема с javascript условием

Question

Я получаю подсчет рангов из класса Html и хочу показать результат на основе подсчета рангов

. Есть 5 вопросов с этими 4 вариантами

, которые имеют Html как показано ниже

var $ = jQuery;
var rank = 0;
 var i;
var x = $(".que").toArray();
var length = x.length+1;
for (i = 1; i < length; i++) {

  var rank_count = ($('.que' + i).find(".selected_answer").attr("class").split(/\s+/));
  //var rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_',''));

  if (i == 5 && rank_count[1] == 'rank_1') {
    rank = parseInt(16);
    //console.log(rank);
  } else {
    rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_', ''));
    //
    console.log(rank);
  }

}
// if rank between 0-4 then show this
if (rank >= parseInt(0) && rank <= parseInt(4)) {
  $('.result').find(".blog1").css('display', 'flex');
}
// if rank between 5-8 then show this
if (rank >= parseInt(5) && rank <= parseInt(8)) {
  $('.result').find(".blog2").css('display', 'flex');
}
// if rank between 9-12 then show this
if (rank >= parseInt(9) && rank <= parseInt(12)) {
  $('.result').find(".blog3").css('display', 'flex');
}
// if rank between 13-16 then show this
if (rank >= parseInt(13) && rank <= parseInt(16)) {
  $('.result').find(".blog4").css('display', 'flex');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="que1 que">question1</p>
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>


<p class="que2 que">question2</p>
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

<p class="que3 que">question3</p>
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

<p class="que4 que">question4</p>
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

<p class="que5 que">question5</p>
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>

. В этом случае я установил условие, если que5 выбрала ответ rank_1, а затем установил ранг 16, иначе подсчитаем ранг согласно выбранному ответу.

но когда я устанавливаю выбранный ответ согласно

if (i == 5 && rank_count[1] == 'rank_1') 
    {
        rank = parseInt(16);
       console.log(rank);
    }else{
       rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_',''));
       console.log(rank);
    }

, он не показывает правильный результат или показывает 2 результата blog3 или blog4

Я не знаю, почему это происходит

Кто-нибудь может мне помочь с этим

Answer 1

Изменения необходимы в трех местах.
1. определите переменную длины как var length = $("p[class^='que']").length;
2. В теге HTML

должен заканчиваться после всех элементов span, только тогда $('.que' + i).find(".selected_answer") сможет найти диапазон с. selected_answer class
3. условие внутри для l oop должно включать <=, чтобы оно достигало до 5 </p>

//var $ = jQuery;
var rank = 0;
var length = $("p[class^='que']").length;

for (i = 1; i <= length; i++) {

  var rank_count = ($('.que' + i).find(".selected_answer").attr("class").split(/\s+/));
  //var rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_',''));
  
  if (i == 5 && rank_count[1] == 'rank_1') {
    rank = parseInt(16);
    
    //console.log(rank);
  } else {
    rank = parseInt(rank) + parseInt(rank_count[1].replace('rank_', ''));
    //
    console.log(rank);
  }

}
alert(rank);
// if rank between 0-4 then show this
if (rank >= parseInt(0) && rank <= parseInt(4)) {
  $('.result').find(".blog1").css('display', 'flex');
}
// if rank between 5-8 then show this
if (rank >= parseInt(5) && rank <= parseInt(8)) {
  $('.result').find(".blog2").css('display', 'flex');
}
// if rank between 9-12 then show this
if (rank >= parseInt(9) && rank <= parseInt(12)) {
  $('.result').find(".blog3").css('display', 'flex');
}
// if rank between 13-16 then show this
if (rank >= parseInt(13) && rank <= parseInt(16)) {
  $('.result').find(".blog4").css('display', 'flex');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p class="que1">question1
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>

<p class="que2">question2
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>
<p class="que3">question3
<span class="answer rank_1">Simple Blog 1</span>
<span class="answer rank_2 selected_answer">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>
<p class="que4">question4
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>
<p class="que5">question5
<span class="answer rank_1 selected_answer">Simple Blog 1</span>
<span class="answer rank_2">Simple Blog 2</span>
<span class="answer rank_3">Simple Blog 3</span>
<span class="answer rank_4">Simple Blog 4</span>
</p>