отобразить блок на основе имени класса

Question

У меня есть раздел div, который генерируется динамически.

<div class="webform submission-1">
   <span class="first">1</span>
   <span class="second">11</span> 
</div>
<div class="webform submission-2">
   <span class="first">2</span> 
   <span class="second">22</span> 
</div>
<div class="webform submission-3">
   <span class="first">3</span> 
   <span class="second">33</span>  
</div>
<div class="webform submission-4">
   <span class="first">4</span> 
   <span class="second">44</span>  
</div>
 ...
<div class="webform submission-12">
   <span class="first">12</span> 
    <span class="second">1212</span>  
</div>

Я хочу отобразить span class = "second" и скрыть class = "first" между submision-1 до submission-3 и для отображенияspan class = "first" и hide class = "second" между submision-4 и submission-12, используя jquery, как проверить, существует ли имя класса с динамическим именем класса и добавить свойство display.

 if($('.submission-2').length>0){ //need to check the between submission-1 to submission-3
$('.second').css('display','block');
$('.first').css('display','none');
}
else if($('.submission-4').length>0){ //need to check the between submission-4 to submission-12
$('.second').css('display','none');
$('.first').css('display','block');
}

Answer 1

Не используйте JS для этого.CSS более чем способен достичь этого более эффективно с помощью селектора :nth-child.

.webform:nth-child(-n+3) .first {
  display: none;
}
.webform:nth-child(n+4) .second {
  display: none;
}

<div class="webform submission-1">
   <span class="first">1</span>
   <span class="second">11</span> 
</div>
<div class="webform submission-2">
   <span class="first">2</span> 
   <span class="second">22</span> 
</div>
<div class="webform submission-3">
   <span class="first">3</span> 
   <span class="second">33</span>  
</div>
<div class="webform submission-4">
   <span class="first">4</span> 
   <span class="second">44</span>  
</div>
<div class="webform submission-12">
   <span class="first">12</span> 
    <span class="second">1212</span>  
</div>

Вот дальнейшее чтение по :nth-child selector.