jQuery使用index()定位元素

Question

所以我有两个无序列表,其中包含相同数量的项目.因此,我们假设无序列表#2中的项都是隐藏的.使它们出现的唯一方法是单击无序列表#1中的项目.

所以基本上

<ul class="list1">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>
<ul class="list2">
  <li class="hide">item 1</li>
  <li class="hide">item 2</li>
  <li class="hide">item 3</li>
  <li class="hide">item 4</li>
</ul>

现在,我正在尝试实现此方法的index()方法是使用该方法,但我不确定如何正确处理此代码.

这就是我想到的.

$('.list1').on('click', 'li', function() {
  $('.list2 li').index($(this).index()).toggleClass('active');
});

因此,当您单击某个订单项时.list1,无论该订单项的索引是什么,都是我要定位的索引.list2

我遇到的问题是,当我登录它时,我得到了奇怪的索引号.第一个订单项将显示为2而不是0,第二个订单项的索引将显示为-1.

我究竟做错了什么？我很确定.

先谢谢你们!

Answer 1

Jquery .index()返回所选元素的索引.您需要使用:eq()selector或.eq()method来选择带索引的元素.

$('.list1').on('click', 'li', function() {    
    $('.list2 li').eq($(this).index()).toggleClass('active');
});

.hide { display: none; }
.active { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list1">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>
<ul class="list2">
  <li class="hide">item 1</li>
  <li class="hide">item 2</li>
  <li class="hide">item 3</li>
  <li class="hide">item 4</li>
</ul>