双无序列表

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>

这是一个无序锚点，每次用户点击锚点时，它都会变成active类。我的问题是：如何在两个锚点上复制此效果最佳方式？到目前为止，当我点击底部的锚点2时，它成功获得了active类，但顶部的锚点2没有。是否有一种像双胞胎或克隆元素之类的东西？

- Julio Bastida

---

请问能提供一个 Fiddle 吗？ - Shashank Shah

我认为你需要展示一下你的js/jquery代码。 - Elliot E

你的意思是这样的 -> https://jsfiddle.net/s7bekp23/ - adeneo

我看到过伟大的人物总是回复评论！:D - Shashank Shah

@adeneo 这正是我在寻找的：您能否发布您的答案以便我点赞？ - Julio Bastida

@JulioBastida - 当然没问题！ - adeneo

Answer 1

您可以获取所点击的li.paginator元素的索引，然后使用nth-child将活动类设置为具有相同索引的任何其他li.paginator，这样该类将添加到两个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>

- adeneo

Answer 2

如果你按照这样的设置，两个ul元素应该能够正常工作，除非你希望这些元素相互镜像。

 $('.paginator').click(function(){ $(this).find('a').addClass("active") });

- Anders Elmgren

---

没错，我正在尝试复制这个效果。 - Julio Bastida