index（）を持つjQueryターゲティング要素

2つの順序付けられていないリストが2つあり、同じ量のアイテムがあります。だから、順序付けられていないリスト＃2のアイテムがすべて隠されていると仮定しよう。順序付けられていないリスト＃1のアイテムをクリックすると、それらを表示させる唯一の方法です。index（）を持つ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'); 
});

あなたはそのラインのアイテムのインデックスは、ある.list2

に私がターゲットにしたい指標である私がいる問題は、そのとき、私が何であれ、.list1に行項目をクリックしてくださいコンソールログ、私は奇妙なインデックス番号を取得しています。最初の広告申込情報は0ではなく2として表示され、2番目の広告申込情報のインデックスは-1になります。

何が間違っていますか？たくさん私は確信しています。

よろしくお願いします。

出典

2016-09-11 giantqtipz

、これを試してみてください。 https://api.jquery.com/eq/ –

[jQuery.index]（https://api.jquery.com/index/）は常にインデックスを返します。あなたは[jQuery.eq]（https： /api.jquery.com/eq/）。指定されたインデックスに一致する要素のセットを[...]に減らします。 –

Jquery .index()選択した要素のインデックスを返します。 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

インデックスの組み合わせで.EQセレクタを使用してみてください、これは罰金あなたのために動作します

<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

index（）を持つjQueryターゲティング要素

答えて

関連する問題