Các yếu tố nhắm mục tiêu jQuery có chỉ mục()

Vì vậy, tôi có hai danh sách không theo thứ tự, với cùng số lượng mục trong đó. Vì vậy, chúng ta hãy giả sử các mục trong danh sách thứ hai không có thứ tự đều bị ẩn. Cách duy nhất để làm cho chúng xuất hiện là nếu bạn nhấp vào các mục trong danh sách không theo thứ tự # 1.Các yếu tố nhắm mục tiêu jQuery có chỉ mục()

nên về cơ bản

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

Bây giờ cách tôi đang cố gắng để thực hiện điều này là sử dụng phương pháp index(), nhưng tôi không chắc chắn làm thế nào để tiếp cận đúng mã này.

Đây là cách tôi nghĩ về nó.

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

vì vậy khi bạn nhấp vào một mục dòng trong .list1, bất kể chỉ số của mục hàng đó là, là chỉ số tôi muốn nhắm mục tiêu trong .list2

vấn đề tôi đang gặp là khi tôi giao diện điều khiển đăng nhập nó, tôi nhận được số chỉ số lạ. Chi tiết đơn hàng đầu tiên sẽ hiển thị dưới dạng 2 thay vì 0 và chỉ mục cho mục hàng thứ 2 sẽ là -1.

tôi đang làm gì sai? rất nhiều tôi chắc chắn.

cảm ơn trước!

Nguồn

2016-09-11 giantqtipz

Hãy thử sử dụng selector .eq với sự kết hợp của chỉ số. https://api.jquery.com/eq/ –

[jQuery.index] (https://api.jquery.com/index/) luôn trả về một chỉ mục, bạn đang tìm kiếm [jQuery.eq] (https://api.jquery.com/eq/) làm giảm '[...] tập hợp các phần tử đã so khớp thành một phần tử tại chỉ mục được chỉ định.' –

Jquery .index() chỉ mục trả về của phần tử đã chọn. Bạn cần sử dụng công cụ chọn :eq() hoặc .eq() để chọn phần tử có chỉ mục.

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

Nguồn

2016-09-11 07:17:44 Mohammad

cảm ơn rất nhiều cho đầu vào. Thật đáng kinh ngạc. Tôi đã gặp một vấn đề khác không may - đó là trộn .not() và .eq() với nhau. nhưng đó là cho một chủ đề khác. cảm ơn rất nhiều, công trình này! – giantqtipz

thử điều này, điều này sẽ làm việc cho bạn tinh

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

Nguồn

2016-09-11 07:27:30

Các yếu tố nhắm mục tiêu jQuery có chỉ mục()

Trả lời

Các vấn đề liên quan