jQuery计算类的数量并停止到特定的类

Question

receive

可以计算班级的总数＆＃34; cal-av＆＃34;从课程开始＃34; .cal-av＆＃34;并以＆＃34; .cal-av.end＆＃34;结束预期结果应为4。

Answer 1

1. 使用.prevall()计算元素。

  

描述：获取匹配元素集中每个元素的所有前面的兄弟节点，可选择由选择器过滤。

当您使用.prevall()时，只需添加一个，因为结果选择器不计入计数

＆＃13;
＆＃13;
var count = $( ".cal-av.end" ).prevAll(".cal-av").length;

console.log(count + 1 ) // add one since the last selected itself is not included in the count
$('.cal-av').eq(3).css("color","red")
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="cal-av">
   <div>available</div>
   </div>
   <div  class="cal-av">
   <div>available</div>
   </div>
   <div  class="cal-av">
   <div>available</div>
   </div>
   <div class="cal-nc">
   <div> not available</div>
   </div>
   <div  class="cal-av end">
   <div>available</div>
   </div>
   <div  class="cal-av">
   <div>available</div>
   </div>
   <div  class="cal-av">
   <div>available</div>
   </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

＆＃13;

＆＃13;

$('.cal-av').each(function(index){ //loop through all .cal-av
    if ($(this).is('.cal-av.end')){ // check if this is the one you're looking for
      console.log(index+1); //plus 1 since index is zero based
      return false;  //stop the loop
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="cal-av">
   <div>available</div>
   </div>
   <div  class="cal-av">
   <div>available</div>
   </div>
   <div  class="cal-av">
   <div>available</div>
   </div>
   <div class="cal-nc">
   <div> not available</div>
   </div>
   <div  class="cal-av end">
   <div>available</div>
   </div>
   <div  class="cal-av">
   <div>available</div>
   </div>
   <div  class="cal-av">
   <div>available</div>
   </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用解决方案https://jsfiddle.net/4ocu2ahu/

var count = 0;
$('.cal-av').each(function(){
	count++;
	if($(this).hasClass('end')){
  	return false; 
  }
});

console.log(count);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="cal-av">
   <div>available</div>
 </div>
 <div  class="cal-av">
   <div>available</div>
 </div>
 <div  class="cal-av">
   <div>available</div>
 </div>
 <div class="cal-nc">
   <div> not available</div>
 </div>
 <div  class="cal-av end">
   <div>available</div>
 </div>
 <div  class="cal-av">
   <div>available</div>
 </div>
 <div  class="cal-av">
   <div>available</div>
 </div>