I have several sections on a page that have the same structure, a div with information to cycle and a div with navigation. Each section has the same classes and mark up, but varies with actual content.
What follows isn't exact, but similar markup: <div class="section"> <div class="verticalList"> <ul>...</ul></div> <div class="serviceRight"> <img /> <img /> <img /> </div> </div> <div class="section"> <div class="verticalList"> <ul>...</ul></div> <div class="serviceRight"> <img /> <img /> <img /> </div> </div> I want to loop through each section and apply the same cycle pattern via the jQuery cycle plugin. My code is as such: $('.serviceRight').each(function() { $(this).cycle({ fx: 'scrollHorz', speed: 400, timeout: 0, pager: $(this).parent().find('.verticalList'), pagerAnchorBuilder: function(idx, slide) { // return sel string for existing anchor //return $(this).parent().find('.verticalList li:eq(' + idx + ') a'); return this.pager.find('.verticalList li:eq(' + (idx) + ') a'); } }); I'm having trouble constructing the pagerAnchorBuilder such that it's relative to the section being cycled. I'm trying to keep the markup for the section generic. Any thoughts? Thanks.