Элементы таргетинга 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

проблема у меня в том, что, когда я console log it, я получаю странные индексы. Первая позиция будет отображаться как 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 с индексом()

ответ

Смежные вопросы