双无序列表答案

【问题标题】：Twin unordered lists双无序列表
【发布时间】：2016-03-13 11:45:46
【问题描述】：

所以我有这个结构：

  <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 没有。有没有办法拥有类似双胞胎或克隆元素的东西？

【问题讨论】：

我们可以请小提琴吗？
我认为你必须向我们展示一些你的 js/jquery。
你的意思是这样-> jsfiddle.net/s7bekp23
我见过伟大的人物总是回答 cmets！ :D
@adeneo 这正是我想要的：您能否发布您的答案以支持它？

标签： javascript jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

如果您像这样设置它，那么两个 ul 元素的工作方式应该相同，除非您希望元素相互镜像：

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

【讨论】：

没错，我正在尝试镜像效果