I have a collection of elements arranged in rows and I am applying Waypoints instances to them.
<div class="row">
<div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
<div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
<div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
<div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
<div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
<div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
</div>
I want to track the total number of active Waypoint instances simultaneously, specifically for each .foo element on the same row:
var total = 0;
$('.foo').each(function() {
$(this).waypoint({
handler: function(direction) {
total++;
}
});
});
The current code works for the first row, but I'm unsure how to reset it before the elements in the second row become active (to count Waypoint instances for the elements in subsequent rows). Any suggestions?