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() return index of selected element. You need to use :eq() selector or .eq() 选择索引元素的方法。

$('.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>

Answer 2

试试这个，这很适合你

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">

/* in here we get the ul which the class name is list2 and get the li elements inside it and hide those first*/
ul.list2 li{
  display: none;
}



</style>

<body>

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

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



</body>

<script type="text/javascript">

$(document).ready(function(){
  $("ul.list1 li").click(function(){
    var theindex = $(this).index();//in here you get the index number of clicked li element inside list1 class
    $("ul.list2 li").eq(theindex).slideToggle(500);//then  in here, you show the same index li element in list2 , which we are hidden.
  });
});

 

</script>

</html>

jQuery 使用 index() 定位元素

jQuery targeting elements with index()

html

javascript

jquery

element