Question

I have this list browse plugin with next & prev button

HTML :

<ul>
  <li><a href="http://www.google.com/">Google</a></li>
  <li><a href="http://www.yahoo.com/">Yahoo</a></li>
  <li><a href="http://www.aol.com/">Aol</a></li>
</ul>

<input type="button" class="prev" value="< Prev" />
<input type="button" class="next" value="Next >" />

JQUERY :

(function(){
    var $lis  = $('ul li'),
        index = 0;

    function li_click(){
        lastIndex = index;
        index = $(this).index();
        $lis.eq(index).addClass('active');
        $lis.eq(lastIndex).removeClass('active');
    }

    $lis.click(function () {
        $lis.eq(index).removeClass('active');
        index = $(this).index();
        $lis.eq(index).addClass('active');
    }).eq(0).addClass('active');

    $('.next, .prev').click(function () {
        $lis.eq(index).removeClass('active');
        if ($(this).hasClass('prev')) {
            index--;
            if (index < 0) {
                index = ($lis.length - 1);
            }
        } else {
            index++;
            if (index >= $lis.length) {
                index = 0;
            }
        }
        $lis.eq(index).addClass('active');
    });
})();

Here is Fiddle

This plugin works fine. But I want to trigger its child element (‘a’) on clicking next/prev buttons

for example, I click on next button & move to Yahoo then I want its child (‘a’) to get clicked. same thing goes with prev button. I want to trigger child element (‘a’) of newly added parent class (‘.active’)

How can I achieve this ?

Answer 1

This should work:

$(".active > a").trigger("click");