How to bind click event to relevant element in jquery?

Question

I have my list of menu.

<div class="nav">
  <ul>
    <li>
      <a href="">1</a>
    </li>
    <li>
      <a href="">2</a>
    </li>
    <li>
      <a href="">3</a>
    </li>
  </ul>
</div>

and I create another nav, that is nav2.

<div class="nav2">
  <ul>
    <li>
      <a href="">1</a>
    </li>
    <li>
      <a href="">2</a>
    </li>
    <li>
      <a href="">3</a>
    </li>
  </ul>
</div>

when the time I click the under nav menu. The event of nav2 menu will click. How can I do that in jquery? I try to use bind in jquery but i don't get the idea on how to do it. I have this code for finding and event. But I'm confuse on how I connect it to nav2 .

var banlenght = $('.nav').find('li');
banlenght.each(function(){
  var ban = $(this);
  ban.click(function(){});
});

Answer 1

Get index of clicked item in .nav using .index() and select relevant item in .nav2 by index using .eq() and then trigger click event using .click()

 $(".nav li").click(function(){ console.log(".nav => "+$('a', this).text()); $(".nav2 li").eq($(this).index()).click(); }); $(".nav2 li").click(function(){ console.log(".nav2 => "+$('a', this).text()); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="nav"> <ul> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> </ul> </div> <div class="nav2"> <ul> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> </ul> </div> 

Answer 2

You can do it by single click event as follow

You need to give same class to the nav bar and then call the click event and add the function in that event

  $(".MyList li").click(function(){ //Call Your Function here alert('Event Called') }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="nav MyList"> <ul> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> </ul> </div> <div class="nav2 MyList"> <ul> <li> <a href="#">1</a> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> </ul> </div>