jQuery Cycle pagerAnchorBuilder

Question

I'm using the Cycle plugin for use in a news-rotator. This means I'm using Div's to populate the slides instead of images.

My ultimate goal is to make a pager where instead of the usual 1, 2, 3, 4, etc. - it instead returns the first H3 tag in the slide.

I know this probably a minor selection issue, but here's what I'm using so far:

$('#scroll_wrap').cycle({
        fx: 'fade',
        pager: '#pager',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li><a href="#">' + slide.children("h3").textContent + '</a></li>';
        }

I've also tried something like this:

    $('#scroll_wrap').cycle({
    fx: 'fade',
    pager: '#pager',
    pagerAnchorBuilder: function(idx, slide) { 
            var h3 = $('div',slide).children('h3');
            return '<li><a href="#">' + slide.h3 + '</a></li>';
    }

As you can probably tell, I'm still a fledgling. :/

Can anyone help me out with the seleciton??

Answer 1

Change the one line in your pagerAnchorBuilder function to this:

return '<li><a href="#">' + jQuery(slide).children("h3").eq(0).text() + '</a></li>';

Three things needed to be changed:

slide => jQuery(slide)
Because jQuery doesn't extend elements with its helper functions unless you tell it to. This is an unfortunate side-effect of jQuery not extending the prototypes of natives (like Element). It means you have to wrap every third thing in your code with jQuery(x).

children("h3") => children("h3").eq(0)
Because selectors return arrays of objects matched, you should grab the first one after you do the selector otherwise the following method call in the chain will act on the set of elements. Jquery should offer things like .firstChild("h3").

textContent => .text()
textContent is a mozilla thing, and wont work on some browsers. Use jQuery's .text() method here. In this case jQuery did nothing wrong.