时间戳

首页 > 解决方案 > 根据类名显示块

jquery - 根据类名显示块

问题描述

我有动态生成的 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>

我想在 submision-1 到 submit-3 之间显示 span class="second" 和 hide class="first" 并在 submision-4 到 submit-12 之间显示 span class="first" 和 hide class="second" 使用jquery如何检查类名是否存在动态类名并添加显示属性。

 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');
}

标签： jqueryhtmlcss

解决方案

不要为此使用 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.

推荐阅读