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>

这是一个无序锚点，每次用户点击一个锚点，它就变成活动类。我的问题是：在两个锚点上复制此效果的最佳方法是什么。到目前为止，当我点击底部的锚点2时，它成功地获得了活动类，但顶部的锚点2没有。有没有办法让双胞胎或克隆元素？

Answer 1

您可以获取所点击的li.paginator元素的索引，并使用li.paginator将活动类设置为具有相同索引的任何其他nth-child，这样就可以将类添加到UL＆＃39; S

＆＃13;

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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

如果你这样设置它对于两个ul元素应该是相同的，除非你想让元素互相镜像：

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

双无序列表

2 个答案: