JQuery waypoints using multiple classes

Question

I use http://imakewebthings.com/jquery-waypoints and having 5 classes (staffmember), at the moment waypoints work in all classes immediately upon receipt of the first class. How to do this so that I can add when you go 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 will try this correctly. It should go through each .waypoint element and add separate waypoints to each of them, which add the .on class when scrolling past them.

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

Answer 2

I think your problem was that you added the "on" class to all the relevant elements ( jQuery('.staffmember') ), and not just the startup element. Waypoints are already iterating for you, as imakewebthings points out.

So your original jQuery should be:

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

This should do the trick without each .