Question

I have the following markup

<div class="content chapters current-tab">
    <div class="right">
        <div id="chapters-container-29" style="">
        <div id="chapters-container-10" style="display: none">
   </div>
</div>`

And this jquery code:

var direction = $(this).data('direction'),
    visibleContainer = $('div[id^=chapters-container-]:visible'),
    container = $('div[id^=chapters-container-]');

    if (direction === 'next') {
            if (visibleContainer.is(':last-child')) { 
                visibleContainer.hide(); 
                container.first().show();
            }

            visibleContainer.hide();
            visibleContainer.next().show();
        } else {               
            if (visibleContainer.is(':first-child')) {
                visibleContainer.hide();
                container.last().show();
            }

            visibleContainer.hide();
            visibleContainer.prev().show();
        }`

This is for a slider….when I am at the end visibleContainer.is('last-child') it is working fine, but when I am @start and click previous it is not working. visibleContainer.is(':first-child') not working.

Answer 1

Have you tried this?

Anyway, this code will work:

if (direction === 'next') {
    if (visibleContainer.is(':last-child')) { 
        visibleContainer.hide(); 
        container.first().show();
    } else {
        visibleContainer.hide();
        visibleContainer.next().show();
    }
} else {               
    if (visibleContainer.is(':first-child')) {
        visibleContainer.hide();
        container.last().show();
    } else {
        visibleContainer.hide();
        visibleContainer.prev().show();
    }
}