Adding flex-active class to the li instead of a/img

Question

When we enable controlNav, we get nice paging list and some usefull class like flex-active. but the class added to the link or image(when thumbnail control enabled). like this:

<ol class="flex-control-nav">
    <li><a class="flex-active">1</a></li>
    <li><a>1</a></li>
</ol>

How to move flex-active class to the li element instead of a/img element to get something like this:

<ol class="flex-control-nav">
    <li class="flex-active"><a>1</a></li>
    <li><a>1</a></li>
</ol>

edit: here the script i used to show flexslider with thumbnail control:

$('.clients-items').flexslider({
    animation: 'slide',
    controlNav: 'thumbnails',
    directionNav: false,
});

Answer 1

Please provide the jQuery you are using to get more precise answer but could you use something like this?

$('.clients-items').flexslider({
    animation: 'slide',
    controlNav: 'thumbnails',
    directionNav: false,
    start: function(){
        $('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌​-active');
    },
    after: function(){
        $('.flex-control-nav .flex-active').parent('li').addClass('flex-active').siblings().removeClass('flex‌​-active');
    }
});