所以我有两个无序列表,其中包含相同数量的项目。因此,让我们假设无序列表 #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。
我做错了什么?我敢肯定。
在此先感谢大家!
最佳答案
Jquery .index()
返回所选元素的索引。您需要使用 :eq()
选择器或 .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>
关于javascript - jQuery 使用 index() 定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39433710/