Question

I have an image carousel. There’s a div for the main viewing area, and then a div containing an unordered list for a bunch of thumbnails. You click a thumbnail, it shows it full-size in the main viewing div. Easy enough.

Here’s a screenshot: https://i.stack.imgur.com/YEyp6.png

But I’m also trying to implement “previous/next” buttons, and how to do this is evading me right now.

As you can see, the current slide is given a class to give it an orange outline.

Each thumbnail also has a unique ID.

How on earth can I click prev/next and retrieve the actual ID of the element possessing the “activeThumb” class?

Thanks for any pointers in the right direction.

Edit for clarification:

<ul>
    <li>
        <a id="01"><img class="activeSlide" /></a>
    </li>
    <li>
        <a id="02"><img class="inactiveSlide" /></a>
    </li>
    <li>
        <a id="03"><img class="inactiveSlide" /></a>
    </li>
</ul>

Using a selector as such:

$('li img [class="activeSlide"]').parent('a').attr('id');

returns undefined.

ANSWER: the following syntax returns the correct ID:

$('img.activeSlide').parent('a').attr('id');

Answer 1

Have you tried

$('.activeThumb').parent('a').attr('id')

If there is only one element with class activeThumb this should return you the id of the active element.

Update: Updated Answer to include comment.