Chọn element nâng cao

chon element jquery

Sau bài này bạn sẽ biết cách chọn chính xác các element theo ý mình. Ví dụ sử dụng với unorderd list, trên thực tế bạn có thể sử dụng bất kỳ thẻ nào khác Smile

Trước tiên là mã HTML:

1 <ul>
2     <li>list 1</li>
3     <li>list 2</li>
4     <li><a href="#" title="not title">list 3</a></li>
5     <li>list 4</li>
6     <li><a href="#" title="title">list 5</a></li>
7     <li>list 6</li>
8     <li>list 7</li>
9 </ul>

Để lựa chọn tất cả các thẻ li, ta dùng

1 $(function() {
2     $('li').addClass('selected');
3 });

Các lựa chọn nâng cao

01 // Chỉ chọn thẻ li đầu tiên
02 $('li:first').addClass('selected');
03 // Chỉ chọn thẻ li cuối cùng
04 $('li:last').addClass('selected');
05 // Chọn tất cả trừ thẻ li đầu tiên
06 $('li:gt(0)').addClass('selected');
07 // Chỉ chọn các thẻ li chẵn (bắt đầu từ 0)
08 $('li:even').addClass('selected');
09 // Chỉ chọn các thẻ li lẻ (bắt đầu từ 0)
10 $('li:odd').addClass('selected');
11 // Chọn thẻ li thứ tư (bắt đầu từ 1)
12 $('li:nth-child(4)').addClass('selected');
13 // Chọn thẻ li thứ tư (bắt đầu từ 0)
14 $('li:eq(4)').addClass('selected');
15 // Chọn các thẻ a ở trong li có title là "title"
16 $('li a').addClass('selected');
17 // Chọn các thẻ a ở ngay sau thẻ li
18 $('li>a').addClass('selected');

Bạn có thể dùng firebug để kiểm tra lại

0938.54.84.99