prev next function for nested tabs in bootstrap

Question

I am using bootstrap tabs and dropdown with prev next functionality

<div class="row">
    <input class="btnPrevious underline" type="button" value="&#171; Previous" />
    <input class="btnNext underline" type="button" value="Next &#187;" />
</div>
<div class="tabbable tabs-left">
    <ul class="nav nav-tabs" role="tablist" id="myTab">
        <!--<li class="active"><a href="#home" role="tab" data-toggle="tab">Before Starting the Application</a></li>-->
        <li class="active dropdown tabdrop"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Before Starting the Application<b class="caret"></b></a>

            <ul class="dropdown-menu dm">
                <li class="active"><a href="#home" role="tab" data-toggle="tab">Before Starting the Application</a>
                </li>
                <li><a href="#who" role="tab" data-toggle="tab">Who Can Apply?</a>
                </li>
            </ul>
        </li>
        <li class="dropdown tabdrop"> <a href="#" role="tab" data-toggle="dropdown" class="dropdown-toggle">
                                        Application Details
                                        <span class="caret"></span>
                                    </a>

            <ul class="dropdown-menu dm">
                <li><a href="#applicant" role="tab" data-toggle="tab">Applicant Details</a>
                </li>
                <li><a href="#permises" role="tab" data-toggle="tab">Premises Details</a>
                </li>
                <li><a href="#personal" role="tab" data-toggle="tab">Details of Personal License Holder</a>
                </li>
            </ul>
        </li>
        <li><a href="#messages" role="tab" data-toggle="tab">Fees and Payments</a>
        </li>
        <li><a href="#settings" role="tab" data-toggle="tab">Checklist</a>
        </li>
        <li><a href="#profile1" role="tab" data-toggle="tab">Conditions</a>
        </li>
        <li><a href="#messages2" role="tab" data-toggle="tab">Submit</a>
        </li>
        <li><a href="#settings1" role="tab" data-toggle="tab">Tab 1</a>
        </li>
        <li><a href="#settings2" role="tab" data-toggle="tab">Tab 2</a>
        </li>
        <li><a href="#settings3" role="tab" data-toggle="tab">Tab 3</a>
        </li>
        <li><a href="#settings4" role="tab" data-toggle="tab">Tab 4</a>
        </li>
        <li><a href="#settings5" role="tab" data-toggle="tab">Tab 5</a>
        </li>
        <li><a href="#settings6" role="tab" data-toggle="tab">Tab 6</a>
        </li>
        <li><a href="#settings7" role="tab" data-toggle="tab">Tab 7</a>
        </li>
    </ul>
</div>

To find anchor tag...for prev next

$('.btnNext').click(function () {
    $('.nav-tabs > .active').next('li, li > ul > li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
    $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

But from the script i didn't find all the anchor tag means anchor tag inside the dropdown (li > ul > li > a )

<li class="dropdown tabdrop"> <a href="#" role="tab" data-toggle="dropdown" class="dropdown-toggle">
                                        Application Details
                                        <span class="caret"></span>
                                    </a>

    <ul class="dropdown-menu dm">
        <li><a href="#applicant" role="tab" data-toggle="tab">Applicant Details</a>
        </li>
        <li><a href="#permises" role="tab" data-toggle="tab">Premises Details</a>
        </li>
        <li><a href="#personal" role="tab" data-toggle="tab">Details of Personal License Holder</a>
        </li>
    </ul>
</li>

I want to find each anchor tag from nav-tabs for prev and next function. Thanks in Advance.

Answer 1

CHK1LAST(); var $tabs = $('.tabbable li');

            $('.btnPrevious').on('click', function () {
                $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
                CHK1LAST();
            });

            $('.btnNext').on('click', function () {

                if ($tabs.filter('.active').find('ul').length > 0) {
                    var $bb = $tabs.filter('.active').find('ul');

                    if ($bb.find('li.active').length > 0) {
                        if ($bb.find('li.active').index() == (parseInt($bb.find('li').length) - 1)) {
                            if ($bb.parent('li').next('li').find('li').length > 0)
                                $bb.parent('li').next('li').find('li').eq(0).find('a[data-toggle="tab"]').tab('show');
                            else
                                $bb.parent('li').next('li').find('a[data-toggle="tab"]').tab('show');
                        }
                        else
                            $bb.find('li.active').next('li').find('a[data-toggle="tab"]').tab('show');
                    }
                    else
                        $bb.find('li').eq(0).find('a[data-toggle="tab"]').tab('show');

                }
                else
                    $tabs.filter('.active').next('li').eq(0).find('a[data-toggle="tab"]').tab('show');


                CHK1LAST();
            });