jQuery cycle pagerAnchorBuilder span in between li
===

I am creating a cycle slideshow, 
the problem is that, i have <span> in between <li> tags, 
the controller <li> buttons doesnt work fine as the actived li skipped the second menu button, if I get all span tags removed, it works good. 
any way I could keep span tags? 
how should I change "pagerAnchorBuilder" attr? 
THanks a lot in advanced 


here are codes


    var $featured_content = $('#slide');
    if ($featured_content.length) {
    	$('#slide').cycle({ 
    	activePagerClass: 'active',
    	timeout: 0,			
    	speed: 300,
    	cleartypeNoBg: true,
    	cleartype: true, 
    	pager: '#controller ',
    	fx: 'fade',
    	pagerAnchorBuilder: function(idx, slide) {
               return '#controller li:eq(' + (idx) + ')';
            }
    }); 
    }
    
    
    
    
    
    
    <ul id="controller">
    <li>menu1</li>  
    <span>|</span>
    <li>menu2</li> 
    <span>|</span>
    <li>menu3</li>
    <span>|</span>
    <li>menu4</li>
    </ul>
    </div>
