jquery cycle, multiple on page

Question

hello im trying to have multiple jquery cycle galleries on one page. ifeel like i have the code right but its not working... can anyone look at and help? it doesnt seem to finding my .next and .prev classes?

jquery:

$('.cycle').each(function() {
    var slideshow = $(this);
    var next = slideshow.closest('.next');
    var prev = slideshow.closest('.prev');

    slideshow.cycle({
        speed: 0,
        timeout: 0, 
        next: next, 
        prev: prev,
    });
});

html:

<div id="woodwood" class="drag">
    <div class='cycle'>
        <img src='invites/baldi.png' />
        <img src='invites/koerfer.png' />
        <img src='invites/williams.png' />
    </div>
    <div class="title">
        Invites<br />
        2010 &mdash; 2012
    </div>
    <div class="controls">
        <a class='prev'><img src="left.gif"></a>
        <a class='next'><img src="right.gif"></a>
        <button>Close</button>
    </div>
</div>  

Answer 1

The closest selects the closest parent not the closest element, you can use find method.

var next = slideshow.parent().find('.next');
var prev = slideshow.parent().find('.prev');

Note that IDs must be unique, if you have several wrappers with ID of woodwood your markup is invalid.