jQuery Click the Next anchor tag from nav-pills after timestamp

Question

I am trying to click on the next nav-link using jquery. I am using Bootstrap 4 with Jquery 3.4.1. I am using Vertical Nav Pills which I want to get activated after the interval of time.

<!-- Tabs nav -->
        <div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Real Estate</p>
            </div>    
            </a>

            <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>eCommerce</p>
            </div>
            </a>

            <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Fashion Photo Editing</p>
            </div>
            </a>

            <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">
            <div class="categoryBox">
                <img src="https://dummyimage.com/240x150/ff6500/fff">
                <p>Furniture Photo Editing</p>
            </div>
            </a>

        </div>

Jquery

jQuery(document).ready(function(e) {

    var click1 = 0;
    setInterval(function(){
        if(jQuery('.nav-pills .nav-link').length == click1)
        {
            click1 = 0; 
        }           
        jQuery('.nav-pills .nav-link:eq( '+click1+' ) a').trigger('click');
        click1 ++;  

    },500);

});

I am not sure why it's not working. Please assit.

Answer 1

As mentionend in my comment, the selector was not selecting the right elements.

jQuery('.nav-pills .nav-link:eq( '+click1+' ) a').trigger('click');

will select the <a>-tag of an element with the .nav-link class. Since the .nav-link element is the <a> tag itself you simply need to remove it from the end:

function toggleActiveLink() {
  var interval = setInterval(function(){
    if(jQuery('.nav-pills .nav-link').length == click1)
    {
      click1 = 0; 
    }           
    jQuery('.nav-pills .nav-link:eq( '+click1+' )').trigger('click');
    click1 ++;  

  },500);
  return interval;
}

var click1 = 0;
var activeLinkInterval = toggleActiveLink();

$('.nav-link').on('mouseenter', function() {
  clearInterval(activeLinkInterval);
}).on('mouseleave', function() {
  activeLinkInterval = toggleActiveLink();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
    <div class="categoryBox">
      <img src="https://dummyimage.com/240x150/ff6500/fff">
      <p>Real Estate</p>
    </div>
  </a>

  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
    <div class="categoryBox">
      <img src="https://dummyimage.com/240x150/ff6500/fff">
      <p>eCommerce</p>
    </div>
  </a>

  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">
    <div class="categoryBox">
      <img src="https://dummyimage.com/240x150/ff6500/fff">
      <p>Fashion Photo Editing</p>
    </div>
  </a>

  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">
    <div class="categoryBox">
      <img src="https://dummyimage.com/240x150/ff6500/fff">
      <p>Furniture Photo Editing</p>
    </div>
  </a>

</div>