jQuery Targeting-Elemente mit Index()

Also habe ich zwei ungeordnete Listen, mit der gleichen Anzahl von Elementen in ihnen. Nehmen wir an, die Artikel in der ungeordneten Liste 2 sind alle ausgeblendet. Sie können nur angezeigt werden, wenn Sie auf die Elemente in der ungeordneten Liste 1 klicken.jQuery Targeting-Elemente mit Index()

so dass im Grunde

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

Nun ist die Art, wie ich dies zu erreichen bin versucht, wird mit der index() Methode, aber ich bin mir nicht sicher, wie man richtig diesen Code nähern.

So habe ich darüber nachgedacht.

$('.list1').on('click', 'li', function() { 
    $('.list2 li').index($(this).index()).toggleClass('active'); 
});

so, wenn Sie in .list1 auf einer Position klicken, was der Index dieser Position ist, ist der Index I in .list2

das Problem Ich habe ausrichten möchten, dass, wenn ich Konsole log es, ich bekomme merkwürdige Indexnummern. Die erste Werbebuchung würde als 2 anstelle von 0 angezeigt und der Index für die zweite Werbebuchung wäre -1.

was mache ich falsch? Ich bin mir sicher.

danke im Voraus Jungs!

Quelle

2016-09-11 giantqtipz

mit der Kombination von Index mit .EQ Selektor Versuchen. https://api.jquery.com/eq/ –

[jQuery.index] (https://api.jquery.com/index/) gibt immer einen Index zurück, Sie suchen nach [jQuery.eq] (https://api.jquery.com/eq/), das 'die Menge der passenden Elemente auf die im angegebenen Index reduziert '. –

Jquery .index() Index des ausgewählten Elements zurückgeben. Sie müssen :eq() Selektor oder .eq() Methode verwenden, um Element mit Index auszuwählen.

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

Quelle

2016-09-11 07:17:44 Mohammad

vielen Dank für die Eingabe. das ist großartig. Ich bin leider auf ein anderes Problem gestoßen - das ist das Mischen von .not() und .eq() zusammen. aber das ist für einen anderen Thread. Vielen Dank, das funktioniert! – giantqtipz

dies versuchen, wird dies für Sie arbeiten

feinen

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

Quelle

2016-09-11 07:27:30

jQuery Targeting-Elemente mit Index()

Antwort

Verwandte Themen