2012-08-08 31 views
9

Làm cách nào để thêm một phần tử của lớp vào vùng chứa với một chỉ mục nhất định?Làm thế nào để thêm lớp học cho con đầu tiên với jQuery?

Tôi đang cố gắng này ngay bây giờ mà ảnh hưởng đến các yếu tố đầu tiên (không làm việc anyway)

$('#resultsBox li:first-child').addClass('aaaa'); 

Nhưng tôi muốn để có thể thay đổi lớp của bất kỳ yếu tố trong nó chứa có chỉ số.

EG nếu tôi muốn thay đổi phần tử với index = 2.

<div id="resultsBox"> 
<ul> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
</div> 

Sẽ trở thành:

<div id="resultsBox"> 
<ul> 
<li></li> // Index 0 
<li></li> // Index 1 
<li class="selected"></li> // Index 2 
</ul> 
</div> 

Trả lời

21

Sử dụng :first selector:

$('#resultsBox li:first').addClass('aaaa'); 

và để lựa chọn yếu tố thứ ba , bạn có thể sử dụng phương thức each(): Here is jsFiddle.

$('ul li').each(function(i) { 
    if (i === 2) { 
     $(this).addClass('aaaa'); 
    } 
}); 

hoặc bạn có thể làm điều này với phương pháp eq như Jamiec & MrThys đề cập: nhưng mỗi phương pháp sẽ được nhiều hữu ích khi mọi việc phức tạp.

$('#resultsBox li').eq(2).addClass('aaaa'); 
0

eq selector

$('#resultsBox li:eq(2)').addClass('aaaa'); 

hoặc eq function

$('#resultsBox li').eq(2).addClass('aaaa'); 
+0

Sẽ hiệu quả hơn khi sử dụng phương thức ['.eq()' (http://api.jquery.com/ eq /), vì bộ chọn là một phần mở rộng jQuery và không phải là một phần của CSS. –

4

Cách rõ ràng nhất để đạt được điều này sẽ là:

$('#resultsBox li').eq(2).addClass('selected'); 

Tài liệu về phương pháp .eq có thể b e được tìm thấy tại đây: http://api.jquery.com/eq/

2

Sử dụng: bộ chọn đầu tiên hoặc bộ chọn: thứ n-con. Tôi đề cập đến bộ chọn: nth-child chỉ đơn giản là trong trường hợp bạn muốn thêm các lớp vào bất kỳ thứ gì khác với cái đầu tiên. Bạn cũng có thể sử dụng: nth-child trong CSS thuần túy không có javascript nếu bạn muốn

$("#resultBox li:nth-child(1)").addClass('aaa'); 
Các vấn đề liên quan