Как привязать событие клика к соответствующему элементу в jquery?

Question

У меня есть список меню.

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

, и я создаю еще одну навигацию, то есть 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>

, когда я нажимаю в меню навигации.Событие меню nav2 будет щелкать.Как я могу сделать это в JQuery?Я пытаюсь использовать связывание в JQuery, но я не понимаю, как это сделать.У меня есть этот код для поиска и события.Но я не совсем понимаю, как подключить его к nav2.

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

Answer 1

Вы можете сделать это одним событием клика следующим образом:

Вам нужно присвоить тот же класс панели навигации, а затем вызвать событие щелчка и добавить функцию в этомсобытие

  $(".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>

Answer 2

Получить индекс выбранного элемента в .nav, используя .index() и выбрать соответствующий элемент в .nav2 по индексу, используя .eq(), а затем вызвать событие щелчка, используя .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>