javascript - 孪生无序列表

Question

所以我有这个结构:

  <ul>
      <li class="paginator"><a class="active">1</a></li>
      <li class="paginator"><a>2</a></li>
      <li class="paginator"><a>3</a></li>
  </ul>
  ... bunch of html code
  <ul>
      <li class="paginator"><a class="active">1</a></li>
      <li class="paginator"><a>2</a></li>
      <li class="paginator"><a>3</a></li>
  </ul>

这是一个无序的 anchor ，每次用户点击一个 anchor ，它就会变成事件类。我的问题是:在两个 anchor 上复制这种效果的最佳方法是什么。到目前为止，当我点击底部的 anchor 2 时，它成功获得了 active 类，但顶部的 anchor 2 没有。有没有办法拥有类似双胞胎或克隆元素的东西？

Answer 1

您可以获得被点击的li.paginator元素的索引，并使用nth将事件类设置为具有相同索引的任何其他li.paginator -child，这样类就被添加到两个 UL 中

var lis = $('.paginator').on('click', function(e) {
	e.preventDefault();
    var idx = $(this).closest('li').index();
    
	lis.find('a').removeClass('active');
    lis.filter(':nth-child('+(idx+1)+')').find('a').addClass('active');
});

a {cursor : pointer}
a.active {
    text-decoration: underline;
    color: red!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
      <li class="paginator"><a class="active">test 1</a></li>
      <li class="paginator"><a>test 2</a></li>
      <li class="paginator"><a>test 3</a></li>
  </ul>
  <!-- ... bunch of html code -->
  <ul>
      <li class="paginator"><a class="active">test 1</a></li>
      <li class="paginator"><a>test 2</a></li>
      <li class="paginator"><a>test 3</a></li>
  </ul>