JQuery - Cách thêm một lớp vào mỗi mục danh sách cuối cùng?

Question

Got một số mã ở đây không hoạt động:

$("#sidebar ul li:last").each(function(){ 
     $(this).addClass("last"); 
}); 

Về cơ bản tôi có 3 danh sách và muốn thêm một lớp (cuối cùng) cho từng hạng mục xuất hiện cuối cùng trong mỗi danh sách có thứ tự.

<ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li class="last">Item 3</li> 
</ul> 

Hy vọng điều đó có ý nghĩa, Chúc mừng!

Answer 1

Dễ sai lầm để thực hiện. Hãy thử điều này:

$("#sidebar ul li:last-child").addClass("last"); 

Về cơ bản: cuối cùng không hoàn toàn làm những gì bạn nghĩ. Nó chỉ phù hợp với cuối cùng trong tài liệu, không phải là cuối cùng trong mỗi danh sách. Đó là những gì: đứa trẻ cuối cùng là cho.

Answer 2

bạn có thể thử

$('#sidebar ul li:last').addClass('last'); 

Answer 3

Lý do không hoạt động do thực tế là :last chỉ khớp với một phần tử. Từ tài liệu jQuery:

Khớp phần tử được chọn cuối cùng.

Vì vậy, những gì mã của bạn đang làm là nhận được một tập của tất cả các <li> yếu tố trong một <ul> và sau đó từ đó thiết lập lấy giá trị cuối cùng. Ví dụ:

<ul> 
    <li>1</li> 
    <li>2</li> 
</ul> 
<ul> 
    <li>3</li> 
    <li>4</li> 
</ul> 
<ul> 
    <li>5</li> 
    <li>6</li> 
</ul> 

Mã của bạn sẽ trả về phần tử <li>6</li>. (Bên trong, nó sẽ thu thập <li>1</li> đến <li>6</li> và sau đó lop ra khỏi cái cuối cùng và trả lại).

Những gì bạn đang tìm kiếm là những câu trả lời khác ở đây đã nói: :last-child.

Answer 4

Hoặc bạn có thể cung cấp cho danh sách của bạn một id và sử dụng nó như một ngữ cảnh để jquery-call.

<ul id="myList"> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

<ul id="anotherList"> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

Và sau đó bạn có thể làm:

jQuery("li:last", "ul#myList").addClass("lastItem"); 

Bây giờ li cuối cùng trong danh sách đầu tiên sẽ có lớp học "lastItem".

Chỉnh sửa: Xin lỗi, đã đọc câu hỏi. Bỏ qua điều này.

Answer 5

với jquery thêm này

$("ul li").last().addClass('last'); 

Answer 6

Nếu bạn cần phải thêm lớp 3 danh sách riêng biệt bạn có thể gán một lớp cho họ và sử dụng 'từng':

$('#sidebar ul.class li:last-child').each(function(e){ 
    $(this).addClass("last"); 
}); 

này nên hoạt động chính xác như Bạn mong đợi.