Làm cách nào để chọn phần tử con cuối cùng trong jQuery?
Chỉ là con cuối cùng, không phải con cháu của nó.
Câu trả lời:
Bạn cũng có thể làm điều này:
<ul id="example">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
// possibility 1
$('#example li:last').val();
// possibility 2
$('#example').children().last()
// possibility 3
$('#example li:last-child').val();
children(). Tùy chọn 1 là thực hiện một lần, nhưng có bộ chọn giả tùy chỉnh / jQuery :lastvà :last-childđã ở đây khá lâu rồi, đối với tôi có vẻ như đó là cách nhanh nhất và mất ít thời gian tính toán hơn để đạt được kết quả.
Bằng cách sử dụng : bộ chọn con cuối cùng ?
Bạn có một tình huống cụ thể cần hỗ trợ không?
Cho năm 2019 ...
jQuery 3.4.0 không dùng nữa: first,: last,: eq,: chẵn,: lẻ,: lt,: gt và: nth. Khi chúng tôi loại bỏ Sizzle, chúng tôi sẽ thay thế nó bằng một trình bao bọc nhỏ xung quanh querySelectorAll và hầu như không thể thực hiện lại các bộ chọn này nếu không có công cụ bộ chọn lớn hơn.
Chúng tôi nghĩ rằng sự đánh đổi này là xứng đáng. Hãy nhớ rằng chúng tôi sẽ vẫn hỗ trợ các phương thức vị trí, chẳng hạn như .first, .last và .eq. Bất cứ điều gì bạn có thể làm với bộ chọn vị trí, thay vào đó bạn có thể làm với các phương thức vị trí. Dù sao thì họ cũng hoạt động tốt hơn.
https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/
Vì vậy, bây giờ bạn nên sử dụng .first(), .last()thay thế (hoặc không có jQuery).
Nếu bạn muốn chọn phần tử con cuối cùng và cần phải cụ thể về loại phần tử, bạn có thể sử dụng công cụ chọn cuối cùng của loại
Đây là một ví dụ:
$("div p:last-of-type").css("border", "3px solid red");
$("div span:last-of-type").css("border", "3px solid red");
<div id="example">
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<span>This is paragraph 3</span>
<span>This is paragraph 4</span>
<p>This is paragraph 5</p>
</div>
Trong ví dụ trên, cả Đoạn 4 và Đoạn 5 sẽ có viền màu đỏ vì Đoạn 5 là phần tử cuối cùng của kiểu "p" trong div và Đoạn 4 là "khoảng" cuối cùng trong div.
Xin chào tất cả Vui lòng thử sản phẩm này
$( "p span" ).last().addClass( "highlight" );
Cảm ơn
children().last()và:last-childbình đẳng. Trong ví dụ này - vâng, nhưng hãy tưởng tượng rằng bạn có hai danh sách (class = "dụ") và sau đó cố gắng chọn các yếu tố cuối cùng từ cả hai danh sách ...