帶索引的jQuery目標元素（）

所以我有兩個無序列表，其中有相同數量的項目。所以讓我們假設無序列表＃2中的項目全部隱藏。使它們出現的唯一方法是如果您單擊無序列表＃1中的項目。帶索引的jQuery目標元素（）

所以基本上

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

我做錯了什麼？我很確定。

在此先感謝你們！

來源

2016-09-11 giantqtipz

嘗試使用.EQ選擇與指數的組合。 https://api.jquery.com/eq/ –

[jQuery.index]（https://api.jquery.com/index/）總是返回索引，您正在尋找[jQuery.eq]（https：/ /api.jquery.com/eq/），它將匹配元素的集合減少到指定索引處的匹配元素集合。 –

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>

來源

2016-09-11 07:17:44 Mohammad

非常感謝您的輸入。這真太了不起了。不幸的是我遇到了另一個問題 - 它將.not（）和.eq（）混合在一起。但這是另一個線程。非常感謝，這工作！ – giantqtipz

試試這個，這會爲你工作精細

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

來源

2016-09-11 07:27:30

帶索引的jQuery目標元素（）

回答

相關問題