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?

post your markup too so we see what is the parent div as oppose to other nodes — makeitmorehuman, Jul 21 '11 at 18:34

score 1 · Accepted Answer · answered Jul 21 '11 at 18:39

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.

Limiting a function to the parent div

1 Answers1