JQuery waypoints using multiple classes

Question

I'm using http://imakewebthings.com/jquery-waypoints and having 5 classes (staffmember), at the moment waypoints fires on all the classes at once when getting the first class. How to stage it so that I can add as you pass through the list?

<ul id="staff">
<li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
</ul>

jQuery

$('.staffmember').waypoint(function(direction) {
jQuery('.staffmember').addClass('on').next();
});

Thanks

Answer 1

If I understand you correctly try this. It should iterate through each .waypoint element and add individual waypoints to each one that add the .on class as you scroll past them.

$('.staffmember').each(function() {
  $(this).waypoint(function() {
    $(this).addClass('on');
  });
});

Answer 2

I think your problem was that you were adding the "on" class to ALL matching elements (jQuery('.staffmember')), instead of just to the triggering element. Waypoints already does the iteration for you, as imakewebthings points out.

So, your original jQuery should be:

$('.staffmember').waypoint(function(direction) {
  jQuery(this).addClass('on').next();
});

That should do the trick without the each.