Limiting a function to the parent div

Question

I have this carousel function:

if ($.browser.msie && $.browser.version.substr(0,1)<9) {
$("ul.display li:eq(0))").show();
}
else
{
$("ul.display li:first").show();
}

$(".viewer ul li.img:first").addClass('viewerOn');

function prodCarousel(){
var aSpecimen = 0;

    $('li.next a').click(function() {
        $('ul.display li').hide();
        $('.viewer ul li.img').siblings().removeClass('viewerOn');
        aSpecimen = aSpecimen + 1;

        if (aSpecimen == $('ul.display li').length + 0)
            aSpecimen = 0;

        if (aSpecimen == $('.viewer ul li.img').length + 0)
            aSpecimen = 0;

        $('ul.display li:eq(' + aSpecimen + ')').fadeIn("fast");

        $('.viewer ul li.img:eq(' + aSpecimen + ')').addClass('viewerOn');

        return false;
    });

    $('li.prev a').click(function() {
        $('ul.display li').hide();
        $('.viewer ul li.img').siblings().removeClass('viewerOn');
        aSpecimen = aSpecimen - 1;

         if (aSpecimen == -1) aSpecimen = $('ul.display li').length - 1;

        $('ul.display li:eq(' + aSpecimen + ')').fadeIn("fast");
        $('.viewer ul li.img:eq(' + aSpecimen + ')').addClass('viewerOn');
        return false;
    });

}

It works great, but since I have multiple divs on the page which use the class .dispaly, the function cycles through all of the images on the page.

What I would like is for the function to only cycle through the photos within the parent div.

I'm not sure how to do this?

Answer 1

You're referencing ul.display which means it won't matter if you have any divs on the page with that class.

Assuming you mean you have multiple <ul>'s with the .display class and that the prev and next buttons are inside the same container as the <ul> you wish to manipulate, you can reference that parent on the click event:

$('li.next a').click(function() {
    $(this).parent().parent().parent().find('ul.display li').hide();
    ... etc
});

First parent() references the li.next, second parent() references the <ul> containing li.next and the third parent() references the <ul>'s container, probably a div, which could easily contain the ul.display as well if you setup your DOM to support this relationship.